Vuejs2 v-for中的Vue过滤器

您好，我对VueJS非常陌生，并且已经开始处理一个非常简单的API请求。我有一个像这样的对象：

posts: [
  text: "String",
  choices: {"1":"Yes","2":"No"}
]

从角度来看，这似乎非常简单。我只需要使用一个过滤器将选择转换为一个对象并在其上循环。然而，我遇到了一个问题。当我尝试在v-for中使用过滤器“log”或“json”时，它们不起作用

<template>
  <div>
    <li v-for="(post,index) in posts | log">
      <ul>
        {{ post.text | log }}
        {{ post.choices | json }}
        <li v-for="(value,key) in post.choices | json">
          {{value}} {{key}}
        </li>
      </ul>
    </li>
  </div>
</template>

<script>
import {HTTP} from './main';
export default {
  filters: {
    json: function (value) {
      return JSON.parse(value)
    },
    log: function (value) {
      console.log(value)
    }
  },
  props: [
    'apiKey'
  ],
  data: () => ({
    posts: [],
    post: [],
    errors: []
  }),

  created() {
    HTTP.get('questions', { headers: { 'Api-Key': this.apiKey} })
    .then(response => {
      this.posts = response.data
    })
    .catch(e => {
      this.errors.push(e)
    })
  }
}
</script>

不起作用：

<li v-for="(value,key) in post.choices | json">

---

有工作吗？我不能使用计算属性，因为这是数组的“子对象”，并且计算属性不能以这种方式工作，除非我弄错了？

您不能向

v-for

指令添加筛选器

只需在设置

posts

data属性之前解析数据：

HTTP.get('questions', { headers: { 'Api-Key': this.apiKey} })
.then(response => {
  let posts = response.data;
  post.forEach(p => p.choices = JSON.parse(p.choices));
  this.posts = posts;
})

---

不能将筛选器添加到

v-for

指令

只需在设置

posts

data属性之前解析数据：

HTTP.get('questions', { headers: { 'Api-Key': this.apiKey} })
.then(response => {
  let posts = response.data;
  post.forEach(p => p.choices = JSON.parse(p.choices));
  this.posts = posts;
})

---

我不明白为什么需要使用

JSON.parse

，因为

choices

键引用了一个有效的JS对象。除非您犯了错误，并且

choices

键引用了字符串

无论如何，如果要将

post.choice

解析为有效的JS对象，只需将其传递到自定义函数中，该函数将解析后的JSON返回到

v-for

，例如：

<li v-for="(value,key) in postChoicesJson(post.choice)">
    {{value}} {{key}}
</li>

---

注意：您的DOM无效，因为

元素必须是
或
元素的直接子元素我不明白为什么需要使用
JSON.parse
，因为
选项
键引用了有效的JS对象。除非您犯了错误，并且
choices
键引用了字符串

无论如何，如果要将
post.choice
解析为有效的JS对象，只需将其传递到自定义函数中，该函数将解析后的JSON返回到
v-for
，例如：

<li v-for="(value,key) in postChoicesJson(post.choice)">
    {{value}} {{key}}
</li>

注意：您的DOM是无效的，因为
元素必须是
或
元素的直接子元素您的
post.choices
已经是一个JS对象，无需在其上运行
JSON.parse
？您的
post.choices
已经是一个JS对象，不需要在上面运行
JSON.parse
？谢谢，我解决了
标签问题。谢谢，我解决了
标签问题。谢谢！虽然这确实有效，但我一直在寻找与特里的答案格式类似的东西+谢谢你！虽然这确实有效，但我一直在寻找与特里的答案格式类似的东西+1.