Question

我在VueJS上有一个错误，在Axios响应的v-for中添加了一个过滤器，但不知道如何解决它。如果我在值变量上生成 console.log ，则过滤器 set_marked 会返回未定义值。

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

您在v-for上使用productList进行迭代，但在您的代码中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返回的内容与您期望的内容之间的差异问题。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

3 个答案: