Question

您好我是VueJS的新手并且已经开始处理非常简单的API请求。我有一个看起来像这样的对象：

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

来自棱角分明，这看起来非常简单。我只想使用过滤器将选择转换为对象并循环它。但是，我遇到了一个问题。当我尝试使用过滤器＆＃39; log＆＃39;或者＆＃39; json＆＃39;在v-for中，他们不能工作。

<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>

然后没有数据显示，但它们在胡子模板中工作正常。有关如何实现这一目标的任何想法？

TL;博士

工作的：

{{ post.choices | json }}

不起作用：

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

有什么工作吗？我无法使用计算属性，因为这是一个＆＃34;子对象＆＃34;除非我弄错了，否则数组和计算属性不会那样工作？

Answer 1

您无法向v-for指令添加过滤器。

在设置posts数据属性之前解析数据：

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;
})

Answer 2

我不明白为什么你需要使用JSON.parse，因为choices键引用了一个有效的JS对象。除非你犯了一个错误，并且choices键引用了一个字符串。

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

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

然后为此声明一个方法：

postChoicesJson: function(obj) {
    return JSON.parse(obj);
}

注意：您的DOM无效，因为<li>元素必须是<ul>或<ol>元素的直接子元素

v-for中的Vue过滤器

2 个答案: