为什么v-for不能显示计算出来的值？

Question

这是用于选择一个city和area，它将过滤相同的数据来显示它。但我遇到的一个问题是，当我选择时，这个值不会出现。

我已经尝试并搜索过类似的代码，但仍然没有找到解决方案。

这是HTML呈现的图像。

​

​

下面是模板

<a href="#" class="list-group-item" v-for="(live , idx) of filterLivingNames" :key="idx">
    <h3 class="text-center">{{live.Name}}</h3>
    <p>Address：</p>
    <p>Phone：</p>
</a>

这是剧本

import LivingData from '@/assets/LivingData.json';

export default {
    computed: {
        livedata(){
            return LivingData;
        },

        filterLivingNames(){
            let livelength = this.livedata.length

            for(let i = 0 ; i < livelength ; i++){
                if(this.livedata[i].Region === this.city && this.livedata[i].Town === this.area){
                    console.log(this.livedata[i])
                    return this.livedata[i]
                }
                else{
                    continue
                }
            }
        }
    }
}

更新json文件

[
  {
    "Id": "1",
    "Name": "Hotel-1",
    "Region": "Region-1",
    "Town": "Town-1",
  },
  {
    "Id": "2",
    "Name": "Hotel-2",
    "Region": "Region-2",
    "Town": "Town-2",
  },
  {
    "Id": "3",
    "Name": "Hotel-3",
    "Region": "Region-2",
    "Town": "Town-1",
  },
  {
    "Id": "4",
    "Name": "Hotel-4",
    "Region": "Region-1",
    "Town": "Town-2",
  },
]

Answer 1

因为您正在过滤出基于livedata和Region的Town。您可以简单地使用Array.filter()方法，这将解决您所面临的问题，因为它将返回数组。

现场演示

​

new Vue({
  el: '#app',
  data: {
    livedata: [
      {
        "Id": "1",
        "Name": "Hotel-1",
        "Region": "Region-1",
        "Town": "Town-1",
      },
      {
        "Id": "2",
        "Name": "Hotel-2",
        "Region": "Region-2",
        "Town": "Town-2",
      },
      {
        "Id": "3",
        "Name": "Hotel-3",
        "Region": "Region-2",
        "Town": "Town-1",
      },
      {
        "Id": "4",
        "Name": "Hotel-4",
        "Region": "Region-1",
        "Town": "Town-2",
      }
    ],
    city: 'Region-1',
    area: 'Town-1'
  },
  computed: {
    filterLivingNames() {
      return this.livedata.filter(obj => obj.Region === this.city && obj.Town === this.area)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <a href="#" class="list-group-item" v-for="(livingData, index) of filterLivingNames" :key="index">
    <h3 class="text-center">{{ livingData.Name }}</h3>
    <p>Address：</p>
    <p>Phone：</p>
  </a>
</div>

​