Блог

У меня есть повторно используемый компонент Vue следующим образом:

 Vue.component('ValueDisplay', {
    template: '<div v-html="value"></div>',
    data: function () {
        value: ''
    },
    mounted: function() {
        this.$el.client = this;
    },
    methods: {
        SetValue: function(value) {
            this.value = value;
        },
    }
});
  

Он предназначен для использования следующим образом:

 <value-display id="battery_percent">
  

Код, который обрабатывает данные из веб-сокета, затем вызывает следующую функцию для установки значения.

 window.SetValue = function(name, value)
{
    var el = document.getElementById(name);

    if ((null != el) amp;amp; el.hasOwnProperty('client')) {
        el.client.SetValue(value);
    }
}
  

Это позволяет мне разделить код отображения и код обработки веб-сокета, поскольку код обработки веб-сокета повторно используется для нескольких HTML-страниц. Я с большим успехом использовал аналогичный шаблон в своем коде, но это не удается.

Значение не отображается, и веб-консоль отображает следующую ошибку:

 ReferenceError: value is not defined
  

Эксперименты показывают, что это происходит потому, что Vue считает, что в части компонента «данные» нет переменной с именем «значение».

В другом месте у меня есть другой компонент Vue, который является более сложным. Он имеет несколько значений, которые используются и обновляются аналогичным образом. Это работает нормально.

 Vue.component('NavPane', {
    template: `<table class="fixed">
...
                         <td v-html="speed"></td>
...
    data: function () {
        return {
...
            speed: ''
        }
    },
    mounted: function() {
    },
    methods: {
    }
});
  

Когда вы сводите его к минимуму, этот код выполняет точно то же самое, что и неисправный код, но этот компонент работает.

Здесь у вас небольшая ошибка:

 data: function () {
  value: ''
},
  

Вы объединили фигурные скобки из объявления функции и литерала объекта. Это должно быть что-то вроде этого:

 data: function () {
  return {
    value: ''
  }
},