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>

我可以成功发出并收到消息，但车型未更新。我检查了收到的消息，它包含＆＃34;模型＆＃34;具有正确价值的关键。

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

我正在使用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/

显示Vue组件发出的值

2 个答案: