Question

采用以下示例代码：

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选项的select。我已经修改了旧版应用程序，将所需的所有信息放入“数据-”属性（加上“ v-bind”）。

现在，我想以各种方式在Vue控件中使用此信息，在此特定示例中，我想在我选择的每个选项的title属性中使用“ data-prefix”。

但是，我不知道如何从计算的属性访问该属性。 Vue有办法做到这一点吗？

为此，我一直在寻找at the documentation，但在任何地方都看不到这一点。这在别的地方做过吗？

Answer 1

如评论中所述，您实际上将需要重新考虑如何将数据设置为组件数据或属性。然后直接从中使用它，而不是将数据绑定到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>

Vue-如何访问计算属性的调用控件

1 个答案: