【vue】一个小bug和key的引入

点击master Vue!删除后该list后输入框中的Jerry消失了

原因 :vue当你更改元素时会在真实的dom中渲染并更新list。这两个goal是两个dom元素,触发点击事件后,vue并不会删除第一个dom元素,而是把第二个dom元素的动态内容({``{ goal }} - {``{ index }})复制到第一个dom元素中,input元素仍然是老元素。

html 复制代码
  <body>
    <header>
      <h1>Vue Course Goals</h1>
    </header>
    <section id="user-goals">
      <h2>My course goals</h2>
      <input type="text" v-model="enteredGoalValue" />
      <button @click="addGoal">Add Goal</button>
      <p v-if="goals.length === 0">
        No goals have been added yet - please start adding some!
      </p>
      <ul v-else>
        <li
          v-for="(goal, index) in goals"
          @click="removeGoal(index)"
        >
          {{ goal }} - {{ index }}<input type="text" @click.stop />
        </li>
      </ul>
    </section>
  </body>
</html>
javascript 复制代码
const app = Vue.createApp({
	data() {
		return {
			enteredGoalValue: '',
			goals: [],
		};
	},
	methods: {
		addGoal() {
			this.goals.push(this.enteredGoalValue);
		},
		removeGoal(idx) {
			this.goals.splice(idx, 1);
		},
	},
});

app.mount('#user-goals');

为此引入key属性,可以在所有带有v-for的html标签使用,就像是id,给每个<li>添加不同的key属性,用来告知vue区分不同的<li>,这样做可以保证input中的内容不会丢失。

html 复制代码
<li
          v-for="(goal, index) in goals"
          :key="goal"
          @click="removeGoal(index)"
        >
        ```
相关推荐
Y425812 分钟前
本地多语言切换具体操作代码
前端·javascript·vue.js
fruge2 小时前
React 2025 完全指南:核心原理、实战技巧与性能优化
javascript·react.js·性能优化
etsuyou3 小时前
js前端this指向规则
开发语言·前端·javascript
不想上班只想要钱4 小时前
vue3+vite创建的项目,运行后没有 Network地址
前端·javascript·vue.js
岁月宁静5 小时前
在富文本编辑器中封装实用的 AI 写作助手功能
前端·vue.js·人工智能
JS.Huang7 小时前
【JavaScript】原生函数
开发语言·javascript·ecmascript
533_8 小时前
[vue] dayjs 显示实时时间
前端·javascript·vue.js
ftpeak9 小时前
JavaScript性能优化实战
开发语言·javascript·性能优化
一个很帅的帅哥9 小时前
JavaScript事件循环
开发语言·前端·javascript
武天9 小时前
Vue项目中有封装过axios吗?怎么封装的?
vue.js