Question

大家好，我可以使用以下功能，但我认为它可能会更好。

 methods: {
        onFileChange(e, filedName) {
            console.log(e.target.files);
            console.log(filedName);
      const file = e.target.files[0];
      const fileToCheck=document.getElementById(filedName);
      console.log(fileToCheck);
      if(filedName=='thumbnail1'){
          if(fileToCheck.value!=''){
            this.thumbnail1 = fileToCheck;
     this.thumbnail1Url= URL.createObjectURL(file);
     } else {
         this.thumbnail1=null;
         this.thumbnail1Url=null;
         }
     }
     if(filedName=='thumbnail2'){
         if(fileToCheck.value!=''){
             console.log(fileToCheck);
             this.thumbnail2=fileToCheck;
         this.thumbnail2Url = URL.createObjectURL(file);
         } else {this.thumbnail2=fileToCheck; this.thumbnail2Url=null;}
     }
    },

代替检查

的值

if(fieldName == "something"){
 this.something = URL.createObjectURL(file) 
}

我只需要传入一个fieldName字符串，然后只需键入this.fieldName就可以将其动态绑定（filedName可以等于thumbnail1或thumbnail2或chicken，我只想能够传入该名称数据并以这种方式绑定到它），但是无论何时我这样做都行不通。任何帮助都会很棒。

Answer 1

我尚不清楚您要完成什么，但是我认为您是在询问要为视图组件创建动态数据属性。如果是这样，那么有几件事情需要考虑。

首先，您引用的示例this.fieldName是不正确的JavaScript语法，如果fieldName是包含属性名称的字符串。正确的版本是this[fieldName]。

不过请注意，您不能简单地通过将Vue组件设置为值来定义 new 数据属性。这是Vue documentation中描述的JavaScript的局限性。如果data[fieldName]是在组件的data对象中定义的现有属性，那么您会没事的。即使您不知道该属性的值，也可以使用例如null的值对其进行初始化，然后在您的方法中更新该值。否则，您需要按照文档说明将属性添加到现有的非根级属性中。

绑定动态此vuejs

1 个答案: