Question

有人知道是否可以在v-for循环中使用某个函数？我想做点什么：

<div v-for="(stbc, index) in data">
    <select>
        <option v-for="foo in bar(stbc.arg1, stbc.arg2)" :value="foo">
            {{ foo }}
        </option>
    </select>
</div>

[...]
props: {
    Configuration: { required: true }
},
computed: {
    data(){
      return this.Configuration.something
             .filter(stbc => {
               return stbc.val !== "no"
             });
    }
},
methods: {
    bar(arg1, arg2){
        this.$http.get(`server_url/baz?arg1=${arg1}&arg2=${arg2}`)
                  .then(res => { return res.split('\n') });
    }
}

我试过但没有成功:(

谢谢！

Answer 1

v-for可以迭代任何有效表达式的结果（虽然我个人会考虑添加computed属性）。

但是，如果您在评论中指示调用服务器，那么您将引入异步代码，而bar(arg1, arg2)可能会返回一个promise，而不是一个字符串数组。

我想你想做的是：

props: {
  Configuration: { required: true }
},
data() {
  return {
    serverData: []
  };
},
mounted() {
  this.fetchData();
},
methods: {
  fetchData() {
    // obtain `arg1` and `arg2` from `this.Configuration`
    // (or use a computed property if you prefer)

    if (arg1 && arg2) {
      this.$http.get(`server_url/baz?arg1=${arg1}&arg2=${arg2}`)
                .then(res => { this.serverData = res.split('\n') });
    }
  }
}

然后只需参考模板中的serverData即可。在AJAX调用返回的promise解析之前，该数组将为空。

如果Configuration道具在组件的生命周期内发生变化，您可能还想添加观察者，再次使用新值调用fetchData。

Answer 2

是的，您可以使用computed来代替methods而不是<select> <option v-for="foo in bar(arg1, arg2)" :value="foo"> {{ foo }} </option> </select> [...] computed: { bar(arg1, arg2){ //get data from server return serverData; //this is a string array } }，请参阅下面的

$tag['attribute_name']

看到这个小提琴：https://jsfiddle.net/49gptnad/2449/

我希望这会对你有所帮助。

Vuejs在v-for中使用函数

2 个答案: