计算属性“main_image”已分配给但它没有设置器

Posted 2023-02-23

【中文标题】计算属性“main_image”已分配给但它没有设置器

【英文标题】：Computed property "main_image" was assigned to but it has no setter

【发布时间】：2018-09-26 22:13:56

【问题描述】：

如何解决此错误“已分配计算属性“main_image”，但没有设置器”？

我正在尝试每 5 秒（随机）切换一次 main_image。这是我的代码，检查created 方法和setInterval。

<template>
  <div class="main-image">
    <img v-bind:src="main_image">
  </div>
  <div class="image-list>
    <div v-for="img in images" class="item"><img src="img.image"></div>
  </div>
</template>

<script>
import axios from 'axios';

export default 
  name: 'Item',
  data () 
    return 
      item: [],
      images: [],
    
  ,
  methods: 
    fetchImages() 
      axios.get(`/api/item/$this.$route.params.id/$this.$route.params.attribute/images/`)
      .then(response => 
          this.images = response.data
      )
      .catch(e => 
          this.images = []
          this.errors.push(e)
      )
    ,
  ,
  computed: 
    main_image() 
      if (typeof this.item[this.$route.params.attribute] !== 'undefined') 
        return this.item[this.$route.params.attribute].image_url
      
    ,
  ,
  watch: 
    '$route' (to, from) 
      this.fetchImages()
    
  ,
  created () 
    axios.get(`/api/item/$this.$route.params.id/`)
      .then(response => 
          this.item = response.data
      )
      .catch(e => 
          this.errors.push(e)
      )
      this.fetchImages();
      self = this
      setInterval(function() 
        self.main_image = self.images[Math.floor(Math.random()*self.images.length)].image;
      , 5000);
  , 

</script>

【问题讨论】：

你能解释一下你希望什么时候发生吗？ main_image 应该在 AJAX 请求完成之前是什么？之后应该是什么，然后每 5 秒应该是什么？

@Phil befere AJAX request from fetchImages 它应该是 this.item.main_image 然后每 5s 应该从 fetchImages 迭代 this.images 并将 v-bind:src="main_image" 更改为下一个元素（下一张图片）

【参考方案1】：

看起来您希望发生以下情况...

main_image 最初是 null / undefined 对/api/item/$this.$route.params.id/的请求完成后，应该是this.item[this.$route.params.attribute].image_url（如果存在） 对/api/item/$this.$route.params.id/$this.$route.params.attribute/images/ 的请求完成后，它应该每 5 秒随机选择一张响应图像。

---

我会忘记使用计算属性，因为这显然不是您想要的。相反，试试这个

data() 
  return 
    item: [],
    images: [],
    main_image: '',
    intervalId: null
  
,
methods: 
  fetchImages() 
    return axios.get(...)...
  
,
created () 
  axios.get(`/api/item/$this.$route.params.id/`).then(res => 
    this.item = res.data
    this.main_image = this.item[this.$route.params.attribute] && this.item[this.$route.params.attribute].image_url
    this.fetchImages().then(() => 
      this.intervalId = setInterval(() => 
        this.main_image = this.images[Math.floor(Math.random()*this.images.length)].image;
      )
    )
  ).catch(...)
,
beforeDestroy () 
  clearInterval(this.intervalId) // very important