Vue.js-尝试编写一个计算程序以返回我的数据的子字符串

我只是在学习Vue.js。我在Youtube上学习了创建iTunes相册搜索的教程。我把一切都做好了。现在我只是想在每个专辑结果中添加一个属性，以便更好地学习。传入的每个相册数据在json中都有一个版权变量

下面是我的代码，它工作时没有错误：

    <template>
    <div>
        <h1>Results for {{$route.params.id}}</h1>

        <div v-if="albumExists">
            <div v-for="(album, index) in albumData" :key="album.id">
                <Card 
                    :title="album.collectionCensoredName"
                    :image="album.artworkUrl100"
                    :artistName="album.artistName"
                    :year="copyrightYear(album.copyright)"
                    :url="album.artistViewUrl"
                    :color="picker(index)"
                />
            </div>
        </div>
        <div v-else>
            <h1>Could Not Find Artist</h1>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import Card from '~/components/Card.vue';
export default {
    asyncData({params}) {
        return axios.get(`https://itunes.apple.com/search?term=${params.id}&entity=album`)
        .then((response) => {
            return {albumData: response.data.results}
        });
    },
    components: {
        Card
    },
    middleware: 'search',
    methods: {
        picker(index) {
            return index % 2 == 0 ? 'red' : 'blue';
        },
        copyrightYear(copyright) {
             return '(' + copyright.slice(2, 6) + ')';
        }
    },
    computed: {
        albumExists() {
            return this.albumData.length > 0;
        },
        // copyrightYear() {
        //     return '(' + this.albumData.copyright.slice(2, 6) + ')';
        // }
    }
}
</script>

albumData需要在组件的数据、道具或其他计算中定义，以实现反应

因此，在异步解析时，将结果分配给this.albumData，但从一开始就在数据中定义this.albumData，即使未定义或为null

data() {
  return {albumData:null}
},

此外，如果this.albumData为null或未定义，albumExists（）应返回false。将在异步返回之前调用

不要使用计算函数，而是调用注释掉的方法。如果albumData为null，则在修复albumExists（）后返回false应该会起作用。

需要在组件的数据、道具或其他计算中定义albumData以使其成为反应式

因此，在异步解析时，将结果分配给this.albumData，但从一开始就在数据中定义this.albumData，即使未定义或为null

data() {
  return {albumData:null}
},

此外，如果this.albumData为null或未定义，albumExists（）应返回false。将在异步返回之前调用

---

不要使用计算函数，而是调用注释掉的方法。如果albumData为null，则在修复albumExists（）后返回false应该会起作用，因为您需要一个数组，所以最佳做法是

data() {
 return {
    albumData: []
  }
},

对于单向绑定（仅用于显示），只需自定义对象属性，然后进行绑定

asyncData({params}) {
    return axios.get(`https://itunes.apple.com/search?term=${params.id}&entity=album`)
    .then((response) => {
      if(response.data.results && response.data.results.length >0){
        return {
          albumData: response.data.results.map(x => {
             return { 
               artworkUrl100: x.artworkUrl100, 
               artistName: x.artistName, 
               copyrightYear: x.copyright.slice(2, 6), 
               artistViewUrl: x.artistViewUrl  
             }
          })
       }
      }
    });
},

---

您需要一个数组，因此最佳做法是

data() {
 return {
    albumData: []
  }
},

对于单向绑定（仅用于显示），只需自定义对象属性，然后进行绑定

asyncData({params}) {
    return axios.get(`https://itunes.apple.com/search?term=${params.id}&entity=album`)
    .then((response) => {
      if(response.data.results && response.data.results.length >0){
        return {
          albumData: response.data.results.map(x => {
             return { 
               artworkUrl100: x.artworkUrl100, 
               artistName: x.artistName, 
               copyrightYear: x.copyright.slice(2, 6), 
               artistViewUrl: x.artistViewUrl  
             }
          })
       }
      }
    });
},

---

我已经用我的更新更新了帖子。仍然收到相同的错误。这是向后->do This albumExists（）{返回This.albumData&&This.albumData.length>0；}，我想知道是否需要告诉计算函数我们在哪个相册上。如果这是真的，也许只有一种方法。像

this.albumData[i].copyright

这样，即使albumExists（）现在返回false，也会调用copyrightYear（）？请尝试在此处删除参数->：year=“copyrightYear”我已使用更新更新了帖子。仍然收到相同的错误。这是向后->do This albumExists（）{返回This.albumData&&This.albumData.length>0；}，我想知道是否需要告诉计算函数我们在哪个相册上。如果这是真的，也许只有一种方法。像

this.albumData[i].copyright

这样，即使albumExists（）现在返回false，也会调用copyrightYear（）？请尝试在此处删除参数->：year=“copyrightYear”完美！这个选项看起来比用单独的方法更干净。太好了！此选项似乎比单独使用方法更简洁。