在 Vue.js 模板中定位内部 html

Posted 2023-02-23

【中文标题】在 Vue.js 模板中定位内部 html

【英文标题】：Targeting inner html inside Vue.js templates

【发布时间】：2020-11-17 19:08:32

【问题描述】：

我是 Vue.js 的新手。我想定位 html 元素内部的值 - 例如div。该特定元素具有来自对象数组的值，并且该行的形状为<div>array.value</div>。我还应用了v-for 指令，所以它看起来像这样：

<ul v-for="(arr, index) in array"
v-bind:key="index">
<div id="el">arr.value</div>
</ul>

所以，我想以与使用 document.getElementById("el").value 相同的方式定位 arr.value 并使用不同的值（使用 v-for 给出）与其他相等的值进行比较（类似于在搜索中完成的方式引擎）。 这种情况下怎么办？

【参考方案1】：

尝试使用 refs 代替 id 属性并将其绑定到当前索引，然后读取该引用的文本：

<ul v-for="(arr, index) in array" v-bind:key="index">
    <div :ref="'el'+index">arr.value</div>
</ul>

这些将创建像 el1, el2 ... 这样的引用

您可以在脚本中的某个地方执行以下操作：

 this.$refs.el1[0].innerHTML

或

 this.$refs.el2[0].innerHTML

获取该 div 元素的内容

Vue.config.devtools = false;
Vue.config.productionTip = false;

let app = new Vue(
  el: '#app',

  data() 
    return 
      array: [
          value: 'bar'
        ,
        
          value: 'foor'
        , 
          value: 'foobar'
        
      ]
    
  ,
  methods: 
    log() 
    window.ref2=this.$refs.el2
      console.log(this.$refs.el2[0].innerHTML)
    
  
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul v-for="(arr, index) in array" v-bind:key="index">
    <div :ref="'el'+index">arr.value</div>
  </ul>

  <button @click="log">log</button>
</div>

【讨论】：

只是为了补充答案。 Vue 文档指出： > 当使用 v-for 用于元素/组件时，注册的引用将是一个包含 DOM 节点或组件实例的数组。

感谢您提到这一点，但这是在您将 ref 放在 v-for 指令旁边的 ul 标记中时完成的

我收到“TypeError: Cannot read property 'text' of undefined”。

@DennisUtzinger 有一个观点。如果你在 v-for 中使用键，你会期望数组中的 refs，所以如果你通过尝试访问元素：this.$refs.el1[0].text.

@BoussadjraBrahim 它帮助我找到了最终解决方案。谢谢老兄。