javascript - 在 v-for 循环中计算 props

Question

我有一个对象数组 - 其中一些需要根据其值调整属性。在 v-for 循环中，如何修改一个值，这是计算出来的吗？

我尝试创建和访问计算值，但我怀疑我误解了此处的事件顺序。

<template>
  <v-container grid-list-md>
    <v-layout row wrap>
      <v-flex xs6 md3 v-for="item in items" :key="item.da_id">
        <v-card>
          <v-img
            :src="item.imgUrl"
            aspect-ratio="2.75"
          ></v-img>
          <v-card-title primary-title>
            <div>
              <h3 class="headline mb-0">{{item.title}}</h3>
            </div>
          </v-card-title>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>





<script>
import axios from 'axios'
export default {
  data() {
    imgUrl: {
      return ''
    }
  },
  async asyncData ({ params }) {
    let {data}  = await axios.get(`http://XXX.XXX.XXX.192:8080/api/collection/${params.id}`)
    return { items: data }
  },
  computed: {
    imgUrl(item) {
        console.log(this.items.map(item))
        return 'https://aijxxppmen.cloudimg.io/crop/500x500/tjpg/https://dartmoorpublic.s3-eu-west-1.amazonaws.com/' + this.items.file_id
    }
  }
}
</script>

我期望每个 v-card :src 值都不同，并且基于我创建的计算函数。我变得不确定。

Answer 1

您不是在寻找计算属性。计算属性是 Vue 实例的属性，而不是 items 数组中元素的属性。您将需要使用方法来代替:

<template>
  <v-container grid-list-md>
    <v-layout row wrap>
      <v-flex xs6 md3 v-for="item in items" :key="item.da_id">
        <v-card>
          <v-img
            :src="imgUrl(item)"
            aspect-ratio="2.75"
          ></v-img>
          <v-card-title primary-title>
            <div>
              <h3 class="headline mb-0">{{item.title}}</h3>
            </div>
          </v-card-title>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

import axios from 'axios'
export default {
  data() {
    imgUrl: {
      return ''
    }
  },
  async asyncData ({ params }) {
    let {data}  = await axios.get(`http://XXX.XXX.XXX.192:8080/api/collection/${params.id}`)
    return { items: data }
  },
  methods: {
    imgUrl(item) {
        console.log(item)
        return 'https://aijxxppmen.cloudimg.io/crop/500x500/tjpg/https://dartmoorpublic.s3-eu-west-1.amazonaws.com/' + item.file_id
    }
  }
}