Javascript 运行方法Vuejs后属性值丢失

我制作了一个材料设计输入字段作为Vue组件。我监听focus事件，并在用户每次聚焦时运行一个函数来检查该值。代码如下：

<template>
<span class="h-input-container">
    <input :type="type" :name="name" v-validate="validation" 
@focusout="classHandle" :id="id" :value="value">
    <p :class="focusClass"><i :class="icon"></i>&nbsp;{{placeholder}}</p>
</span>
</template>

<script>
export default {
    mounted: function(){
        if (this.value != '') {
            this.focusClass = 'focused'
        }
    },
    props: {
        placeholder: {
            default: ''
        },
        name: {
            default: 'no-name'
        },
        type: {
            default: 'text'
        },
        validation: {
            default: ''
        },
        icon: {
            default: ''
        },
        id: {
            default: ''
        },
        value: {
            default: ''
        }
    },
    data: function(){
        return {
            focusClass: '',
        }
    },
    methods: {
        classHandle: function(event){
            if (event.target.value != '') {
                this.focusClass = 'focused'
            } else {
                this.focusClass = ''
            }
        }
    }
};
</script>

{{placeholder}

导出默认值{
挂载：函数（）{
if（this.value！=''）{
this.focusClass='focused'
}
},
道具：{
占位符：{
默认值：“”
},
姓名：{
默认值：“没有名字”
},
类型：{
默认值：“文本”
},
验证：{
默认值：“”
},
图标：{
默认值：“”
},
身份证：{
默认值：“”
},
价值：{
默认值：“”
}
},
数据：函数（）{
返回{
焦点类：“”，
}
},
方法：{
类句柄：函数（事件）{
如果（event.target.value！=''）{
this.focusClass='focused'
}否则{
this.focusClass=“”
}
}
}
};

---

我将该值作为名为

value

的道具传递，并使用

：value=“value”

将该值用于输入字段。问题是，每当方法

classHandle

运行时，输入字段的值就会消失。我不明白为什么。

当您更改输入时，当前组件似乎没有刷新此.value。Vue会在您调出焦点时导致组件刷新，并且由于您的值未更新，因此显示empy。要解决问题，您需要在事件

输入上更新
此.value


newvue(
{
el:“#应用程序”，
道具：{
占位符：{
默认值：“”
},
姓名：{
默认值：“没有名字”
},
类型：{
默认值：“文本”
},
验证：{
默认值：“”
},
图标：{
默认值：“”
},
身份证：{
默认值：“”
},
价值：{
默认值：“”
}
},
数据：函数（）{
返回{
焦点类：“”，
}
},
方法：{
更新值（事件）{
this.value=event.target.value
},
类句柄：函数（事件）{
如果（event.target.value！=''）{
this.focusClass='focused'
}否则{
this.focusClass=“”
}
}
}
});

{{placeholder}

为了澄清已接受的答案，当
聚焦输出
处理程序触发时，Vue不会“刷新”该值。属性
value
从未更改，输入元素的值也发生了更改

更改
focusClass
将强制Vue将组件重新呈现到DOM。因为您已经告诉Vue使用属性
value
，作为通过
：value=“value”
输入的值，所以它使用属性的当前状态，该属性从未更改过，如上所述，以呈现组件，并且您在输入中键入的任何内容都将消失

接受的答案接着指出，您应该通过更新
this.value
来解决此问题。在组件中，Vue将允许您这样做，但它会在控制台中抛出警告

[Vue warn]：避免直接变异道具，因为该值将
每当父组件重新渲染时覆盖。相反，使用
基于道具值的数据或计算属性。支柱存在
变异：“价值”

Vue中组件的属性就像javascript中的函数参数一样。在组件内部，您可以更改它们，但该更改仅限于组件的范围。如果父组件必须重新渲染，则输入的属性“值”将使用父组件版本的值重新绘制，并且您将丢失所做的更改

{
  props: {
    placeholder: {
      default: ''
    },
    name: {
      default: 'no-name'
    },
    type: {
      default: 'text'
    },
    validation: {
      default: ''
    },
    icon: {
      default: ''
    },
    id: {
      default: ''
    },
    value: {
      default: ''
    }
  },
  template:`
    <div class="h-input-container" style="background-color: lightgray">
        <input :type="type" :name="name"  
    @focusout="classHandle" :id="id" :value="value" @input="$emit('input', $event.target.value)" />
        <p :class="focusClass"><i :class="icon"></i>&nbsp;{{placeholder}}</p>
    </div>
  `,
  data: function() {
    return {
      focusClass: '',
    }
  },
  methods: {
    classHandle: function(event) {
      if (event.target.value != '') {
        this.focusClass = 'focused'
      } else {
        this.focusClass = ''
      }
    }
  }
}

在Vue中“道具下降，事件上升”。要更改组件外部的值，必须
$emit
它。下面是一个组件版本，它可以正常工作，不会抛出任何警告，并正确地发出更改

{
  props: {
    placeholder: {
      default: ''
    },
    name: {
      default: 'no-name'
    },
    type: {
      default: 'text'
    },
    validation: {
      default: ''
    },
    icon: {
      default: ''
    },
    id: {
      default: ''
    },
    value: {
      default: ''
    }
  },
  template:`
    <div class="h-input-container" style="background-color: lightgray">
        <input :type="type" :name="name"  
    @focusout="classHandle" :id="id" :value="value" @input="$emit('input', $event.target.value)" />
        <p :class="focusClass"><i :class="icon"></i>&nbsp;{{placeholder}}</p>
    </div>
  `,
  data: function() {
    return {
      focusClass: '',
    }
  },
  methods: {
    classHandle: function(event) {
      if (event.target.value != '') {
        this.focusClass = 'focused'
      } else {
        this.focusClass = ''
      }
    }
  }
}

{
道具：{
占位符：{
默认值：“”
},
姓名：{
默认值：“没有名字”
},
类型：{
默认值：“文本”
},
验证：{
默认值：“”
},
图标：{
默认值：“”
},
身份证：{
默认值：“”
},
价值：{
默认值：“”
}
},
模板：`
{{placeholder}

`,
数据：函数（）{
返回{
焦点类：“”，
}
},
方法：{
类句柄：函数（事件）{
如果（event.target.value！=''）{
this.focusClass='focused'
}否则{
this.focusClass=“”
}
}
}
}

我已经整理了一个示例来演示这两种方法的差异

通常，我不会使用
：value=“value”@input=“$emit（'input'，$event.target.value）”
并使用
v-model
，但您也在使用
：type=“type”
，Vue将抛出一条关于将
v-model
与动态类型一起使用的警告。
“验证”看起来不像典型的“v-validate”规则。它做什么？@BertEvans它不是一个v-validate规则，它是一个我传入自定义值的道具。当然，该值应该是一个现有的规则。当您使用此组件编辑它时，您是否期望作为值传入的内容也会在组件外部发生更改？干杯，它会起作用。但我很好奇，为什么当我聚焦时Vue会刷新值？它有用吗？我将@input=“updateValue”替换为@input=“$emit（'input'，$event.target.value）”，但它似乎不起作用。我显然错过了什么。这是什么？当您应该使用v-model时，最有可能是使用：value绑定到组件。