Vue - Как получить доступ к управлению вызовами вычисляемого свойства - PullRequest
Новая
       50

Vue - Как получить доступ к управлению вызовами вычисляемого свойства

0 голосов
/ 11 октября 2018

Возьмите следующий пример кода: 

new Vue({
  el: '#app',
  data: {
    name: 'Test'
  },
  computed: {
  	hover: function () {
        //I'd like to use the "data-prefix" here instead of "XXX"
    	return this.name + "XXX"; 
    }  
  }
})
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <select>
    <option data-prefix="ABC" v-bind:title="hover">1</option>
    <option data-prefix="XXX" v-bind:title="hover">2</option>
    <option data-prefix="YYY" v-bind:title="hover">3</option>
  </select>
  
  <input type="text" name="name" v-model="name">
</div>

Здесь у меня есть устаревшее приложение, которое генерирует выбор с опциями varios.Я изменил старое приложение, чтобы поместить всю необходимую информацию в атрибуты «data-» (плюс добавить «v-bind»).

Теперь я хотел бы использовать эту информацию различными способами в моем элементе управления Vue, в этом конкретном примере я хотел бы использовать «префикс данных» в атрибуте title для каждой опции в моем выборе.

Однако я не знаю, как получить доступ к этому свойству из вычисляемого свойства.Есть ли способ сделать это с помощью Vue?

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

1 Ответ

0 голосов
/ 12 октября 2018

Как уже упоминалось в комментариях, вам на самом деле нужно переосмыслить, как ваши данные могут быть установлены для данных компонента или свойства.Затем используйте его непосредственно из него, а не привязывайте ваши данные к вашему атрибуту DOM и обращайтесь к нему из DOM.

Например, в приведенном выше примере для демонстрации наведения вам фактически не нужен атрибут DOM префикса данных.Это может быть установлено в массив в данных.Затем из массива установите заголовок, чтобы показать ваше наведение.Как это: 

new Vue({
  el: '#app',
  data: {
    prefix:[{id:1, name:'ABC'}, {id:2, name:'XXX'}, {id:3, name:'YYY'}],
    name: 'Test'
  }
})
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <select>
    <option v-for="obj in prefix" :title="name+obj.name">{{obj.id}}</option>
  </select>
  
  <input type="text" name="name" v-model="name">
</div>
...