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

Question

我面临将类别 SINGLES 相关数据存储到数组中，然后使用该数组显示显示数据的问题。 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

      }
    ]
  }

Answer 1

看起来您的方法缺少一些要点。 此外，您最后缺少一个} 。

尝试这个：

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

            }

        });

    });

}