Javascript VueJS过滤器不'；我不能在v-for工作_Javascript_Vuejs2_Axios

Javascript VueJS过滤器不'；我不能在v-for工作

javascript vuejs2

Javascript VueJS过滤器不'；我不能在v-for工作,javascript,vuejs2,axios,Javascript,Vuejs2,Axios,我在VueJS上有一个错误，在Axios响应的v-for中添加了一个过滤器，我不知道如何解决它。如果我在值变量上设置了控制台.log，则标记为的过滤器将返回一个未定义的值以下是HTML： <main id="app"> <div v-for="item in productList" :key="item.id"> <header> <h2>{{ item.title }}</h2> </header>

我在VueJS上有一个错误，在Axios响应的v-for中添加了一个过滤器，我不知道如何解决它。如果我在值变量上设置了控制台.log，则标记为的过滤器将返回一个未定义的值

以下是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>

您也可以在我的代码笔上试用：

谢谢你的帮助

您在

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."
    }
}

在第一次迭代中，将

项

分配给

“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
作为item.content
的值传递给set\u-marked
过滤器
productList
是对GET
请求的响应，正如我们所看到的，它不是返回一个数组，而是返回一个对象
如果添加到筛选器，请检查（！value）是否返回“”它可以工作，但您只是隐藏了API返回的内容与您期望的内容之间的差异问题
如果通过过滤result.data
的子对象并仅保留包含title
和contents
字段的子对象，将productList
构建为一个数组，则它可以工作：

已标记函数（值）{
返回值.toUpperCase（）；
}
var app=新的Vue({
el:“#应用程序”，
数据：{
产品列表：[]
},
已创建：函数（）{
这是。加载=真；
this.getPostsViaREST（）；
},
过滤器：{
设置标记：功能（值）{
//console.log（值）；
返回标记（值）；
}
},
方法：{
getPostsViaREST:函数（）{
axios.get（“https://cdn.contentful.com/spaces/itrxz5hv6y21/environments/master/entries/1Lv0RTu6v60uwu0w2g2ggM?access_token=a2db6d0bc4221793fc97ff393e541f39db5a65002beef0061adc607ae959abde")
。然后（响应=>{
//this.productList=response.data；
让data=response.data；
让productList=[]，键；
用于（输入数据）{
设val=数据[键]；
如果（（val.title！==未定义）&&（val.content！==未定义））{
productList.push（val）；
}
}
this.productList=productList；
});
}
}
})
@导入url（'https://fonts.googleapis.com/css?family=Lato');
身体{
字体系列：“Lato”，无衬线；
字体大小：1.125rem；
}
#应用程序>分区{
最大宽度：68厘米；
保证金：0自动；
}

{{item.title}
好的，我在文档中找到了解决方案
我必须将以下代码添加到标记为正常工作的筛选器集合中：
if (!value) return '';
value = value.toString();

我目前不知道为什么需要这些额外的线路
我还有第二个问题，因为返回的html由VueJS转义。
避免此问题的最简单方法是使用v-html指令。
要在v-html指令中应用筛选器，必须使用以下语法：
v-html="$options.filters.set_marked(item.content)"

你可以在这里找到我的笔：
通常我只在需要过滤时创建一个方法，然后在组件中需要时使用它
即：
然后在组件中：
 <h1>{{ filterPost(item.title) }}</h1>

{{filterPost（item.title）}

在这里可以找到完整的示例：
什么是标记的
函数？这是我添加的另一个库，用于显示标记内容：那么为什么不在演示中包含它呢？这似乎不是问题所在。我的错误发生在标记的函数调用之前。我刚找到这段代码，但我非常失望。我不知道为什么没有这个代码：if（！value）返回“”；value=value.toString（）；该值未定义。。。最后一个问题是html被转义…可能productList
中的一些item
记录缺少content
字段。使用开发工具检查来自GET
请求的响应。第一部分不是问题的实际解决方案：这些行只是对空/未定义值和非字符串值的防范，但您只是在规避实际问题，这是您在v-for
中期望的数组与响应的对象性质之间的不匹配。数据
对不起，我不理解您的答案。过滤器返回值变量的“未定义”值，作为过滤器的参数传递。如果我添加我在答案中指定的两行，value将返回正确的字符串。这就像是一个暂时的结果，我真的不明白为什么。。。我在代码笔中添加了两个console.log。如果您查看一下控制台，第一个结果返回“undefined”，第二次返回的错误消息值太长。如果你能帮助理解为什么它会这样，我真的很感谢你的反馈！是的，它返回未定义的，原因我在下面的回答中解释过。我将尝试修改它，并以更清晰的方式解释问题。谢谢您的回答。如果我添加一个console.log，过滤器和方法似乎调用了两次。我将在VueJS过程中进一步解释原因。您能详细说明一下吗？这不是一个“过滤器”，我只是在方法的前面加上了过滤器，如果让人困惑，我很抱歉。不，对不起，你的例子很清楚。我不明白的是，如果我将console.log添加到filterPost方法中，我会看到它被调用了两次。一次未定义，第二次变量值良好。我不认为在这个过程中
    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>