VueJS – 為什么我不能從 DOM 中刪除元素？

Question

我是 VueJS 的新手，正在努力弄清楚如何做一些非常基本的事情。 我正在嘗試做的一件具體事情是以各種方式修改我頁面上的 SVG，包括刪除<g>元素的子元素並用其他子元素替換它們。 我嘗試的一切都行不通，我不知道為什么。

這是代碼的非常簡化的版本...

HTML

<svg id="hz_svg" data-name="hz_svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 1000">
  <g class="scale" width ="1400" style="fill: none; stroke: white; stroke-width: 2px;"> 
    <line x1="100" y1="1000" x2="1500" y2="1000"  />
    <g class="ticks">
      <line x1="100" y1="1000" x2="100" y2="980"/>
      <line x1="800" y1="1000" x2="800" y2="980"/>
      <line x1="1500" y1="1000" x2="1500" y2="980"/>
    </g>
  </g>
</svg>

應用程序.js

const ticksEl = document.querySelector("#hz_svg .ticks");

createApp({
  methods: {
    renderTicks() {
      ticksEl.replaceChildren();
      console.log('REMOVED!!!');
    },

這里奇怪的是console.log('REMOVED!!!')運行，這意味着ticksEl.replaceChildren(); 跑了。 然而，頁面上的元素沒有任何反應。 我的ticks <line>沒有被刪除。 我知道這不是 JS 本身的問題，因為我可以通過在 createApp 之外包含replaceChildren()輕松刪除元素。

那么這里發生了什么？ 為什么我不能刪除元素？

請記住，如果不需要，我不想在 vueJS 數據中表示線條元素。

注意：在console.log('Removed!!!')之后運行此代碼表示不再有行（孩子不在那里），即使我可以在頁面上清楚地看到它們： console.log(ticksEl.children);

Answer 1

我強烈建議首先閱讀更多關於 Vue 和類似框架的基本知識。 下面只是一個示例，說明如何執行與您嘗試實現的目標類似的事情：

 new Vue({ el: '#container', template: `<div> <button v-on:click="removeShapes">Remove Shapes</button> <label><input type="radio" name="fill" value="red" v-on:change="saveFill":checked="currentFill === 'red'"> Red</label> <label><input type="radio" name="fill" value="blue" v-on:change="saveFill":checked="currentFill === 'blue'"> Blue</label> <label><input type="radio" name="fill" value="green" v-on:change="saveFill":checked="currentFill === 'green'"> Green</label> <button v-on:click="addShape">Add Shape</button> <svg id="hz_svg" data-name="hz_svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 1000" width="1600" height="1600" preserveAspectRatio="xMinYMin slice"> <template v-for="shape of this.shapesHTML"> <g v-html="shape" /> </template> </svg> </div>`, data: { shapes: [ { type: 'circle', cx: 30, cy: 50, r: 30, fill: 'red' }, { type: 'circle', cx: 70, cy: 50, r: 30, fill: 'green' }, { type: 'circle', cx: 110, cy: 50, r: 30, fill: 'blue' }, ], currentFill: 'red', }, computed: { shapesHTML() { return this.shapes.map((shape) => { let attributes = (({ type, ...attributes }) => attributes)(shape) let htmlAttributes = Object.entries(attributes).map(([key, attribute]) => `${key}="${attribute}"`) return `<${shape.type} ${htmlAttributes.join(' ')} />` }) } }, methods: { removeShapes() { this.shapes = [] }, addShape() { this.shapes = [...this.shapes, { type: 'circle', cy: 50, cx: 20 + ((this.shapes.length + 1) * 30), r: 30, fill: this.currentFill, } ] }, saveFill(e) { this.currentFill = e.target.value } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="container"></div>