0

采取以下示例代码：

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>

在这里，我有一个遗留应用程序，它生成一个带有各种选项的选择。我修改了旧版应用程序，将我需要的所有信息放入“data-”属性中（加上“v-bind”）。

现在我想在我的 Vue 控件中以各种方式使用这些信息，在这个特定的示例中，我想在我选择的每个选项的标题属性中使用“数据前缀”。

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

我已经查看了有关此的文档，但在任何地方都没有看到这一点。这在其他地方做过吗？

4

1 回答 1

0

正如评论中提到的，您实际上需要重新考虑如何将您的数据设置为组件数据或属性。然后直接从中使用它，而不是将您的数据绑定到您的 DOM 属性并从 DOM 访问它。

例如，在上面提到的用于显示悬停的示例中，您实际上不需要 data-prefix 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>

于 2018-10-12T12:23:30.723 回答