相关疑难解决方法(0)

在我的项目中，我有一个包含三个ul列表的组件。我也有一些带有项目的数据数组，每个项目都有一些属性。我的目标是：

1. 将基本阵列中的项目分配到三个列表中
2. 由于每个项目都有一个告诉我们该项目属于哪个列表的属性，因此可以在列表之间拖放项目并相应地更新项目数据

我没有复制粘贴大量代码，而是尝试通过使用以下简单示例在jsfiddle中重现错误的行为：

https://jsfiddle.net/89pL26d2/4/

问题是，当您拖放时，您恰好拖动了2个项目，而不是一个。

但是，当我从计算属性切换到时watch，得到了所需的行为，并且一切正常。

我找出导致错误的行：更新项目属性时的行告诉我完成拖动后该项目应属于哪个列表。但我不知道为什么会导致这种情况

我知道这不是直接使用HTML的最佳方法，但是我现在还可以。

我正在开发基于vue.js的中型Web应用程序.我一直面临着几个与vue实例生命周期有关的虚拟DOM问题.

以下代码片段(此处也提供了 jsFiddle )演示了其中的一些问题.所述检测成分 VUE组件接收的属性值,并使用该值来更新其内部状态.

每当数据集发生变化时(通过排序或新数据),属性都会更新,但内部状态不会更新.通过运行代码段并单击按钮,可以很容易地看到这一点.

我理解数据组件属性是一个函数,看起来它只在创建组件时才被调用.这种情况解释了发生了什么.问题是我不知道如何实现预期的行为:每当数据源发生变化时,所有子组件内部状态都要更新.

1. 在组件
   "刷新" 时是否会触发生命周期回调？我想要一个组件刷新回调.我是否需要单独观察道具变化？那将是丑陋的.
2. 当道具改变时,是否有一种更新内部状态的干净方法？
3. 是否有可能销毁所有子组件并强制重新创建它们？我知道这不是最好的选择,但它会解决我所有的数据绑定问题:)
4. vue如何决定何时释放或重用组件？在我的示例中,当数据集大小从4变为3时,组件消失,但前3个项内部状态不会更改,因此前三个项目正在被回收.

将所有状态移动到vuex将是​​一种可能的解决方案,但有些组件是通用的,我不希望它们包含有关vuex存储详细信息的知识.实际上我在大多数组件中使用vuex,但对于真正的通用组件,我认为这不是一个好选择.

var testComponent = Vue.component('test-component', {
  template: '#component_template',
  props: ['prop1'],
  data: function(){
    return {
      internalState: this.prop1 
    }
  }
})

new Vue({
  el: "#app",
  data: function(){
    return {
      items: [
        'Item 1',
        'Item 2',
        'Item 3'
      ],
      dataToggle: true,
      sorted: true
    };
  },
  methods: {
    sortDataSet: function(){
      if(this.sorted){
        this.items.reverse();
      } else {
        this.items.sort;
      }
    }
    ,changeDataSet: function(){
      if(this.dataToggle){
        this.items = ['Item 4', …

我要实现的目标：
从jwt令牌受保护的源加载图像，
服务器将图像返回为base64字符串，然后我将该字符串作为背景url加载到图像上

父组件：

<template lang="html">
     <myImage v-for="photo in form.photos" :photo="photo" @delphoto="deleteImage"></myImage>
</template>

export default {
        components: {
            myImage,
        },
        data(){
            return {
                form: {
                    photos: [
                {
            id: 1,
            thumbnail: "logo1.png"
            },
                {
            id: 2,
            thumbnail: "logo2.png"
            },
                {
            id: 3,
            thumbnail: "logo3.png"
            },
                {
            id: 4,
            thumbnail: "logo4.png"
            },
            ]

                },

            }
        },
        methods: {
            deleteImage(myphoto)
            {
                this.form.photos.splice(this.form.photos.indexOf(myphoto), 1);
            }
        }
    }

myImage组件

<template>
        <div v-if="loaded" class="img">
            <img class="albumimg" :style="{ background: img}" :title="title">
            <p @click="delimage">delete</p>
        </div>
        <div v-else …