javascript - 更新列表数组中 Javascript (Vue.js) 对象中的单个项目

Question

我有一个图库图像列表，我希望能够选择一个图像来使其预览:true默认情况下，始终必须有预览图像。我正在尝试的是

1. 点击图片
2. 删除所有图像的预览
3. 将点击的图像设为预览
4. 更新 API

这是我想要开始工作的代码:

export default {
    props: ['images'],
    methods: {
        makePreview (image, index) {

            // Loop through images and remove preview
            this.images.map((image, index) => {
                image.preview = false
            })

            // Set clicked image to preview
            image.preview = true

            // Update API
            this.updateImages()
        }
    }
}

当我在该方法中 console.log(image) 时，我确实获得了要更新的正确图像对象，但这并没有更新 images 属性。

编辑:

图像对象:

{
    alt: "New venue"
    id: 111
    large: "https://radnomcdn.com/large.jpg"
    order: 2
    preview: false
    thumb: "https://radnomcdn.com/thumb.jpg"
}

Answer 1

我不确定您的问题中缺少什么，这段代码似乎有效。我看到的唯一主要区别是我注释掉了 updateImages 方法。

从技术上讲，这是一种你正在改变属性的情况，这通常是不受欢迎的。目的是向下传递属性，并将这些属性的更改作为事件发送回父级。但是，对象和数组可以发生变化。

const images = [{
    alt: "New venue",
    id: 111,
    large: "https://radnomcdn.com/large.jpg",
    order: 2,
    preview: false,
    thumb: "https://radnomcdn.com/thumb.jpg"
  },
  {
    alt: "New venue",
    id: 222,
    large: "https://radnomcdn.com/large.jpg",
    order: 3,
    preview: false,
    thumb: "https://radnomcdn.com/thumb.jpg"
  },
  {
    alt: "New venue",
    id: 333,
    large: "https://radnomcdn.com/large.jpg",
    order: 4,
    preview: false,
    thumb: "https://radnomcdn.com/thumb.jpg"
  }

]

Vue.component("display-images", {
  template:`
    <div>
      <div v-for="image, index in images">
        {{image.preview}}
        <button @click="makePreview(image, index)">Preview</button>  
      </div>
    </div>
  `,
  props: ['images'],
  methods: {
    makePreview(image, index) {

      // Loop through images and remove preview
      this.images.map((image, index) => {
        image.preview = false
      })

      // Set clicked image to preview
      image.preview = true

      // Update API
      //this.updateImages()
    }
  },
  mounted(){
    this.makePreview(this.images[0])
  }
})

new Vue({
 el: "#app",
 data:{
   images
 }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<div id="app">
  <display-images :images="images"></display-images>
  <div style="margin-top:5em">{{images}}</div>
</div>