0

Как с помошью Vue JS заменить тег родительского блока? Например li.parent на span.parent

Пример по ссылке https://jsfiddle.net/eywraw8t/339447/

<ul>
<li v-for="todo in todos" class="parent">
  <span class="child">{{ todo.text }}</span>
</li>

5
  • какой в этом смысл? 6 сен 2018 в 11:28
  • Или я не понял, что вы хотите или просто добавьте tag <li v-for="todo in todos" class="parent child" tag="span" v-text="todo.text"> и получится в ul список из span 6 сен 2018 в 11:34
  • и чем это решит задачу? Думаю, что вы не поняли. Нужно заменить li на span Теги взяты для примера.
    – someUser
    6 сен 2018 в 11:51
  • @someUser, нужно брать другой пример, потому что в ul могут быть только li, и даже если ты поменяешь li на span - то результаты могут удивить
    – Grundy
    12 сен 2018 в 8:34

2 ответа 2

0

Использовал ref чтобы получить элемент.

JSFiddle

const myElement = this.$refs.myElement // получает элемент по ref
const tag = this.$refs.myElement.tagName.toLowerCase()  // tag элемента
const re = new RegExp(tag, 'g') // RegExp для замены
const newTag = 'span' // новый тег

// замена outerHTML на новый
myElement.outerHTML = myElement.outerHTML.replace(re, newTag)
0

В справке описана возможность динамического переключения компонентов.

Для этого нужно воспользоваться элементом <component> и директивой is.

В директиву передается название нужного компонента либо объект с настройками.

Например:

new Vue({
  el: "#app",
  data: {
    todos: [{
        text: "Learn JavaScript"
      },
      {
        text: "Learn Vue"
      },
      {
        text: "Play around in JSFiddle"
      },
      {
        text: "Build something awesome"
      }
    ],
    cmp: 'li'
  },
  methods: {}
})
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app">
  <h2>Todos:</h2>
  <ul>
    <component v-bind:is="cmp" v-for="todo in todos" class="parent">
      <span class="child">{{ todo.text }}</span>
    </component>
  </ul>
  <input type="button" value="change" @click="cmp = 'span'" />
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.