从VUE组件发出的显示值

Question

我创建了两个分离的VUE组件，我能够通过总线发出消息。

如何在接收消息的组件中渲染/显示消息。

接收消息的VUE组件的示例：

<template>
    <div v-model="cars">
        Car model: {{ model }}
        <input type="button" @click="display" value="example" />
    </div>
</template>

<script>
    export default {
        data() {
            return {
                cars: null
            }
        },
        mounted() {
            bus.$on('CARS_LOADED', (cars) => {
                this.cars = cars;
            });
        },
        methods: {
            display()
            {
                console.log(this.cars);
            }
        }
    }
</script>

我可以成功发出并收到消息，但是没有更新汽车模型。我检查了收到的消息，并包含具有正确值的"模型"键。

我看不到Vue控制台中的任何错误，但是，如果我替换了" {{model}}"，则" {{cars}}"我可以看到完整的消息对象更新了。

我正在使用vue 2.x。

更新：我包含一个例子：https://jsfiddle.net/kvzvxk4f/1/

您在示例中可以看到，我无法从对象呈现特定字段，但是我可以将对象渲染为字符串。

Answer 1

我认为您正在误解Vue语法的某些部分。

如何访问对象的属性：

您只需要写{{ car.model }}即可访问对象的属性。

如何通过模板中的数组迭代：

如果要在模板中显示所有cars，则应写：

<div v-for="car in cars">
    {{ car }}
</div>

如您所见，v-for指令允许您通过数组迭代。

什么是v-model？

v-model用于将变量绑定到输入或组件。

<template>
    <div>
        <input type="text" v-model="foo" />
    </div>
</template>
<script>
export default {
    data () {
        return {
            foo: 'bar'
        }
    }
}
</script>

在这种情况下，foo属性将绑定到输入文本。

最后一点：

在您的情况下，要使它起作用，您还需要为模板创建一个根元素，因为模板不能具有多个根元素：

<template>
    <div>
        <div v-for="car in cars">
            {{ car }}
        </div>
    </div>
</div>

Answer 2

我找到了答案。

我只需要键入以"。"为单位的属性。例如{{cars.model}}。

<template id="compo2">
  <div>
    <div>
       {{ field.name }}
    </div>
    <div>
      Received: {{ field }}
    </div>
  </div>
</template>

示例：https://jsfiddle.net/zuhb7s8q/3/