Vue项目中使用v-text出现覆盖子元素错误的求助

错误原因 #

这个错误的核心是v-text指令会完全覆盖所在元素的所有子内容。你之前用插值语法{{ text }}时，元素内只有插值表达式，改成v-text后，大概率是你的元素里还残留了其他内容（比如没删掉的插值符号、多余文本），或者写法错误导致元素存在子节点，v-text执行时就会触发这个警告——这和变量名无关，所以改变量名没用。

修复步骤 #

• 确保使用v-text的元素内部是空的，只保留指令绑定：
  正确写法：

  <div v-text="test"></div>
  

  错误写法（会触发警告）：

  <div v-text="test">{{ test }}</div>
  

  <div v-text="test">其他文本内容</div>
  

• 如果需要在同一个元素内结合固定内容和动态值，别用v-text，直接用插值语法更合适：

  <div>固定内容：{{ test }}</div>
  

• 非要用v-text的话，把动态内容单独放在子元素里：

  <div>固定内容：<span v-text="test"></span></div>
  

内容的提问来源于stack exchange，提问作者Samuel M.