Vue.js中通过参数访问赋值data属性的可行性及DRY实现疑问

你的两个疑问解答 #

1. 在Vue.js的methods中能否访问data属性并赋值，this[[attributeName]] = "x"的写法是否有效？ #

• 完全可以在methods中访问并修改data属性，Vue会自动响应这些变化更新视图。
• 但this[[attributeName]]的写法是错误的，双层方括号属于语法错误。正确的写法是使用单层方括号：this[attributeName]，通过属性名字符串来动态访问对象属性。

2. 如何通过方法参数定位对应的data属性并更新其值？ #

• 核心是传递data属性的名称字符串作为参数，而不是传递属性的当前值。
• 在方法中通过this[参数名]的方式，就能定位到对应的data属性并修改其值。

修正后的代码实现 #

1. JavaScript代码（app.js） #

const app = Vue.createApp({
    data(){
        return {
            firstInputBoxTextValue: "",
            secondInputBoxTextValue: ""
        };
    },
    methods: {
        showAlert(){
            alert("Button has been clicked..!");
        },
        updateInputBoxText(event, inputBoxTextIdentifier)
        {
            // 修正方括号写法，单层方括号访问属性
            this[inputBoxTextIdentifier] = event.target.value;
        }
    }
});
 
app.mount("#assignment");

2. HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Basics</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
    <script src="https://unpkg.com/vue" defer></script>
    <script src="app.js" defer></script>
  </head>
  <body>
    <header>
      <h1>Events</h1>
    </header>
    <section id="assignment">
      <h2>Event Practice</h2>
      <!-- 1) Show an alert when the button is pressed -->
      <button v-on:click="showAlert">Show Alert</button>
      <hr />
      <!-- 2) Register user input on "keydown" -->
      <!-- 传递属性名称字符串，而非属性值 -->
      <input type="text" v-on:keydown="updateInputBoxText($event, 'firstInputBoxTextValue')"/>
      <p> OUTPUT {{firstInputBoxTextValue}} </p>
      <hr />
      <!-- 3) Update only when ENTER key is pressed -->
      <!-- 同样传递属性名称字符串 -->
      <input type="text" v-on:keydown.enter="updateInputBoxText($event, 'secondInputBoxTextValue')"/>
      <p>OUTPUT {{secondInputBoxTextValue}}</p>
    </section>
  </body>
</html>

进一步优化（遵循DRY原则） #

如果后续需要更多输入框，可以把输入框的状态整合到一个对象中，减少重复的data属性，示例如下：

const app = Vue.createApp({
    data(){
        return {
            inputValues: {
                first: "",
                second: ""
            }
        };
    },
    methods: {
        showAlert(){
            alert("Button has been clicked..!");
        },
        updateInputBoxText(event, key)
        {
            this.inputValues[key] = event.target.value;
        }
    }
});

对应的HTML部分修改为：

<input type="text" v-on:keydown="updateInputBoxText($event, 'first')"/>
<p> OUTPUT {{inputValues.first}} </p>
<hr />
<input type="text" v-on:keydown.enter="updateInputBoxText($event, 'second')"/>
<p>OUTPUT {{inputValues.second}}</p>

内容的提问来源于stack exchange，提问作者BaaBaa