Как сделать обертку для элементов с текстом на vue?

Question

[meruem228]

Как сделать чтобы элементы в которых есть :ref="setItemRef" заворачивались внутрь обертки если переменная red = true.
т. е если red = true, то каждый div или span с таким рефом выглядел так:

<div class="YY"
   <div class="block" >1111</div>
</div>

Пытался сделать через render функцию

<script setup>
    
    import {h, ref, onBeforeUpdate, onUpdated, onMounted } from 'vue'


  const red = ref(true)

  const itemRefs = ref([])
    

    
    const setItemRef = el => {
      console.log('************', el.nodeName);
      if (el) {
        itemRefs.value.push(el)
      }
      if( el && red.value) {
        
        el = renderI(el);
        console.log('дошло', (el.type));
      }
    };


    function renderI(n) {
    console.log('aaaaaaaaaaaaaaa');

    return h('div', {class: 'YY'}, [h(n.nodeName, n.textContent)]);
  };

  
  const renderItx = () => {
    return h('div', {class: 'YYX'}, [h('div', '090988fyyf')]);
    // return h('div', {class: 'YYX'}, [h(itemRefs.value[0].classname, itemRefs.value[0].innerText)]);
    }
</script>

<template>
    <h1>Totoro {{red}} </h1>
    <button @click="red = !red">Кнопка</button>
    <renderItx></renderItx>
<div class="cont">
  <div class="block" :ref="setItemRef">1111</div>
    <div class="block" :ref="setItemRef">2222</div>
    <div class="block" :ref="setItemRef">3333</div>
    <span class="block" :ref="setItemRef">444</span>
    <span class="block" :ref="setItemRef">555</span>
    <span class="block" >7777</span>
    <span class="block" >9999</span>
    <span class="block" :ref="setItemRef">555</span>
</div>
    


</template>

<style lang="scss">
.cont{
  width: 380px;
  margin: 0 auto;
}
.block{
  border: 2px solid rgb(10, 185, 54);
  padding: 2px;
  margin: 5px;
  max-width: 100px;
}
button{
  background: rgb(134, 255, 63);
  border: 3px solid #000;
  margin: 4px;
}
</style>

Answer 1

[Владимир Коротенко]

<script>
export default {
  data() {
    return {
      items: [
        {val: 1111, boxed: true, isSpan: false},
        {val: 2222, boxed: true, isSpan: false},
        {val: 3333, boxed: true, isSpan: false},
        {val: 4444, boxed: true, isSpan: true},
        {val: 5555, boxed: true, isSpan: true},
        {val: 7777, boxed: false, isSpan: true},
        {val: 9999, boxed: false, isSpan: true},
        {val: 555, boxed: true, isSpan: true},
      ],
      red: false
    }
  }
}
</script>

<template>
   <h1>Totoro {{red}} </h1>
    <button @click="red = !red">Кнопка</button>
   
    <div class="cont">
        <template v-for="item in items" v-key='item.val'>
          <template v-if='item.boxed && red'>
            <div class='yy'>
              <span class='block' v-if='item.isSpan'>{{item.val}}
              </span>
              <div class='block' v-else>
                {{item.val}}
              </div>
            </div>
          </template>
          <template v-else>
            <span class='block' v-if='item.isSpan'> {{item.val}}</span>
            <div class='block' v-else >
              {{item.val}}
            </div>
          </template>
        </template>
		</div>
</template>

<style>
  .yy > .block{
   border: 2px solid red;  
  }
.cont{
  width: 380px;
  margin: 0 auto;
}
.block{
  border: 2px solid rgb(10, 185, 54);
  padding: 2px;
  margin: 5px;
  max-width: 100px;
}
button{
  background: rgb(134, 255, 63);
  border: 3px solid #000;
  margin: 4px;
}
</style>

Comments

[meruem228]

спасибо большое, но не совсем то что нужно, я хочу применить этот код не просто к списку элементов внутри одного контейнера, а к любому элементу с текстом на странице (если у него есть нужный атрибут или параметр), где бы он не находился, поэтому v-for тут вряд ли поможет

[Владимир Коротенко]

meruem228, кроме того что это не очень практика, а чего хотите добиться? Чисто бизнес задача?

[meruem228]

Владимир Коротенко, что-то типа CMS для текста, жмешь кнопку -> появляется обертка с инпутом -> редактируешь текст -> сохраняешь изменения. (я только учусь, сильно не бейте)

[Владимир Коротенко]

meruem228, Мне кажется лучше в начале разобрать дерево на лексемы, а после уже работать с ними.
Ну или взять готовый редактор