Как с помошью 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>
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуКак с помошью 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>
Использовал ref чтобы получить элемент.
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)
В справке описана возможность динамического переключения компонентов.
Для этого нужно воспользоваться элементом <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>
<li v-for="todo in todos" class="parent child" tag="span" v-text="todo.text">
и получится в ul список из spanul
могут быть толькоli
, и даже если ты поменяешьli
наspan
- то результаты могут удивить