VueJS 过滤器在 v-for 中不起作用

Question

我在 VueJS 上有一个错误，在 Axios 响应的 v-for 中添加了一个过滤器，我不知道如何解决它。如果我在 value 变量上创建了 console.log，过滤器 set_marked 将返回一个 undefined 值。

这是 HTML：

<main id="app">
  <div v-for="item in productList" :key="item.id">
  <header>
    <h2>{{ item.title }}</h2>
  </header>
  <article class="product-card">
      {{ item.content | set_marked  }}
  </article>
  </div>
</main>

还有 Javascript：

var app = new Vue({
  el: '#app',
  data: {
    loading: false,
    loaded: false,
    productList: []
  },
  created: function() {
    this.loading = true;
    this.getPostsViaREST();
  },
  filters: {
    set_marked: function(value) {
      return marked(value);
    }
  },
  methods: {
    getPostsViaREST: function() {
      axios.get("https://cdn.contentful.com/spaces/itrxz5hv6y21/environments/master/entries/1Lv0RTu6v60uwu0w2g2ggM?access_token=a2db6d0bc4221793fc97ff393e541f39db5a65002beef0061adc607ae959abde")
           .then(response => {
              this.productList = response.data;
            });
    }
  }
})

你也可以在我的 codepen 上试试： https://codepen.io/bhenbe/pen/deYRpg/

感谢您的帮助！

Answer 1

您在productList 上使用v-for 进行迭代，但在您的代码中productList 不是一个数组而是一个对象（换句话说，是一个字典）。事实上，如果你看它，它有这样的结构：

{
    "sys": {
        "space": {
            "sys": {
                "type": "Link",
                "linkType": "Space",
                "id": "itrxz5hv6y21"
            }
        },
        "id": "1Lv0RTu6v60uwu0w2g2ggM",
        "type": "Entry",
        "createdAt": "2017-01-22T18:24:49.677Z",
        "updatedAt": "2017-01-22T18:24:49.677Z",
        "environment": {
            "sys": {
                "id": "master",
                "type": "Link",
                "linkType": "Environment"
            }
        },
        "revision": 1,
        "contentType": {
            "sys": {
                "type": "Link",
                "linkType": "ContentType",
                "id": "page"
            }
        },
        "locale": "fr-BE"
    },
    "fields": {
        "title": "Retour sur douze années de design",
        "content": "Douze années ... vie."
    }
}

遍历它，在第一次迭代中将分配给item "sys" 键的值，即：

{
    "space": {
        "sys": {
            "type": "Link",
            "linkType": "Space",
            "id": "itrxz5hv6y21"
        }
    },
    "id": "1Lv0RTu6v60uwu0w2g2ggM",
    "type": "Entry",
    ...
    "locale": "fr-BE"
},

在第二次迭代中，"fields" 键的值，其值为：

{
    "title": "Retour sur douze années de design",
    "content": "Douze années ... vie."
}

由于您正在访问item.title 和item.content，并且title 和content 键不存在于第一个对象中，而仅存在于第二个对象中，因此在第一次迭代中它们将是undefined。因此，在第一次迭代中，您将 undefined 作为 item.content 的值传递给 set_marked 过滤器。

productList 是对GET 请求的响应，正如我们所见，它返回的不是数组而是对象。

如果您将检查 if (!value) return ''; 添加到过滤器中，它将起作用，但您只是隐藏了 API 返回的内容与您所期望的内容之间存在差异的问题。

如果您通过过滤result.data 的子对象并仅保留包含title 和contents 字段的子对象，将productList 构建为数组，则它可以工作：

function marked(value) {
    return value.toUpperCase();
}

var app = new Vue({
  el: '#app',
  data: {
    productList: []
  },
  created: function() {
    this.loading = true;
    this.getPostsViaREST();
  },
  filters: {
    set_marked: function(value) {
      // console.log(value);
      return marked(value);
    }
  },
  methods: {
    getPostsViaREST: function() {
        axios.get("https://cdn.contentful.com/spaces/itrxz5hv6y21/environments/master/entries/1Lv0RTu6v60uwu0w2g2ggM?access_token=a2db6d0bc4221793fc97ff393e541f39db5a65002beef0061adc607ae959abde")
           .then(response => {
              // this.productList = response.data;
              let data = response.data;
              let productList = [], key;
              for (key in data) {
                let val = data[key];
                if ((val.title !== undefined) && (val.content !== undefined)) {
                  productList.push(val);
                }
              }
              this.productList = productList;
            });
    }
  }
})

@import url('https://fonts.googleapis.com/css?family=Lato');

body{
  font-family: 'Lato', sans-serif;
  font-size: 1.125rem;
}

#app > div{
  max-width: 68ch;
  margin: 0 auto;
}

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<main id="app">
  <div v-for="item in productList" :key="item.id">
  <header>
    <h1>{{ item.title }}</h1>
  </header>
  <article class="product-card" v-html="$options.filters.set_marked(item.content)"></article>
  </div>
</main>

Answer 2

好的，我在文档中找到了解决方案。

我必须将以下代码添加到过滤器 set_marked 才能正常工作：

if (!value) return '';
value = value.toString();

我目前不知道为什么需要这些额外的行。

我遇到了第二个问题，因为返回的 html 被 VueJS 转义了。 避免此问题的最简单方法是使用 v-html 指令。 要在 v-html 指令中应用过滤器，您必须使用以下语法：

v-html="$options.filters.set_marked(item.content)"

你可以在这里找到我的笔：https://codepen.io/bhenbe/pen/deYRpg

Answer 3

通常我只是在需要过滤时创建一个方法，然后在需要时在我的组件中使用它。

即：

    methods: {
    getPostsViaREST: function() {
      axios.get("https://cdn.contentful.com/spaces/itrxz5hv6y21/environments/master/entries/1Lv0RTu6v60uwu0w2g2ggM?access_token=a2db6d0bc4221793fc97ff393e541f39db5a65002beef0061adc607ae959abde")
           .then(response => {
              this.productList = response.data;
            });
    },
    filterPost(post) {
     return _.toUpper(post);
    }
  }

然后在你的组件中：

 <h1>{{ filterPost(item.title) }}</h1>

在这里找到完整的例子：

https://codepen.io/Venomzzz/pen/mLrQVm?editors=1011