Отображаемое значение, полученное от компонента Vue

Я создал два отдельных компонента 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/

Как вы можете видеть в примере, я не могу отображать конкретное поле из объекта, однако я могу отображать объект как строку.


vue.js components render emit display
person Juan Lago    schedule 26.03.2018    source источник
comment
Не могли бы вы поделиться компонентом, в котором вы испускаете значение? Просто чтобы проверить, импортируете ли вы шину в какой-то момент в свои компоненты?   -  person Hammerbot    schedule 26.03.2018
comment
что вы ожидаете от v-model="cars", когда он присоединен к <div>?   -  person Roy J    schedule 26.03.2018

Ответы (2)


arrow_upward
1
arrow_downward

Я думаю, что вы неправильно понимаете некоторые части синтаксиса 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>
person Hammerbot    schedule 26.03.2018
comment
Отправляемое сообщение является объектом, а не массивом. структура объекта что-то вроде {name:Mercedes, model:Benz}. - person Juan Lago; 26.03.2018
comment
Хо, хорошо, я отредактировал свой ответ, посмотри, как получить доступ к свойству объекта - person Hammerbot; 26.03.2018

arrow_upward
0
arrow_downward

Я нашел ответ.

Мне просто нужно ввести свойство, разделенное знаком «.». Например, {{cars.model}}.

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

Пример: https://jsfiddle.net/zuhb7s8q/3/

person Juan Lago    schedule 26.03.2018