javascript - 如何在Vue Js中选择特定的json数据并将其存储到数组中?

标签 javascript vue.js

我面临将类别 SINGLES 相关数据存储到数组中,然后使用该数组显示显示数据的问题。基本上,我只想存储我命名的 json 文件中仅属于类别“SINGLES”的数据“data.json”放入数组中。任何人都可以帮助我吗?我真的很感激。 索引.html

<div id="app">
<div class="col-lg-4 col-sm-6" v-for="model in jsonSingleData">
 <div class="beeton-models-box">
<div class="image-holder">
</div>
<div class="text-box">
<h3>{{model.title}}</h3>
<p>{{model.bedrooms}}</p>

</div>
</div>
</div>
</div>

script.js 

var vm = new Vue({

el:'#app',
data:{

    jsonSingleData:[]



},
created:function(){
   this.fetchDataAll();


},

methods:{


fetchDataAll: function(){

    var url="data.json";
    axios.get(url)
    .then(function(res){

     res.data.models.forEach(single=>{

            if(single.category=='SINGLES')
            {


                vm.jsonSingleData=single;
                console.log(single);



            }


        });

    });

}

下面是我的 json 文件。 数据.json

{
    "models": [
      {
        "title": "IRIS",
        "project": "ABC",
        "category": "SINGLES",
        "bedrooms": 3

      },
      {
        "title": "LILAC",
        "project": "ABC",
        "category": "DOUBLE",
        "bedrooms": 4

      },
      {
        "title": "ASTER",
        "project": "ABC",
        "category": "SINGLES",
        "bedrooms": 4

      }
    ]
  }

最佳答案

看起来你的方法缺少一些要点。另外,您在末尾缺少 }

试试这个:

fetchDataAll: function(){
    var vm = this;
    var url="data.json";
    axios.get(url)
    .then(function(res){

     res.data.models.forEach((single)=>{

            if(single.category=='SINGLES')
            {

                vm.jsonSingleData.push(single);
                console.log(single);

            }

        });

    });

}

关于javascript - 如何在Vue Js中选择特定的json数据并将其存储到数组中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60250599/

相关文章:

javascript - Meteor 更新模板助手

javascript - ASP.NET MVC - 将包含数组的 FormData 映射到模型类

javascript - 使用 JavaScript 在 Firebase 中查找和修改(或删除)匹配节点的精确语法

javascript - Puppeteer 重新加载页面,直到某些特定样式发生更改

javascript - 弹出窗口中的文本字段未固定日期选择器位置

javascript - 如何使用vue router-link只改变一个参数

javascript - 方法 "showDate"在组件定义中具有类型 "undefined"

javascript - 获取标记但纬度和经度为空 - vue.js

javascript - TypeError : this. posts.filter不是使用Vue js和wordpress api的函数

vue.js - 如何使用 vue-test-utils 和 vue 测试 prop 方法?