Блог

Я пытаюсь создать в своей программе кнопку, которая переключается на ряд других вещей и удаляется после нажатия. Соответствующий HTML-код выглядит следующим образом:

 <div id="app">
    <button @click="reveal" v-if="!showlists">Start</button>
    <ul v-if="showlists">
    <list v-for="name in chosenNames" v-bind:name="name"></list>
    </ul>
</div>
 

В этом случае неупорядоченный список должен отображаться, как только переменная «showlists» имеет значение true, а кнопка должна быть удалена, как только «showlists» имеет значение true. Мое приложение Vue выглядит так:

 let app = new Vue({
    el: "#app",
    data: {
        showlists: false,
        chosenNames: [
        { text: "name1" },
        { text: "name2" },
        { text: "name3" },
        ]
    },
    methods: {
        reveal: function() {
            showlists = true;
        }
    }
})
 

Исходя из этого, переменная «showlists» запускается как false, и программа работает так, как задумано, с отображением кнопки и скрытием списка. Как только кнопка нажата, функция запускается, и для списков отображения устанавливается значение true (я подтвердил это в своих усилиях по устранению неполадок). Однако, как только это происходит, DOM не обновляется динамически, а вместо этого просто остается таким, каким он был в начале.

Извините, если это что-то действительно базовое, я очень новичок в Vue и все еще пытаюсь учиться 🙂

Мы будем признательны за любую и всяческую помощь.

Вы должны использовать ключевое слово «this» в своем методе «revel» перед showlists this.showlists = true; переменной like в вашем экземпляре «Vue».

Например, вы можете написать примерно следующее

 <div id="app">
    <button @click="reveal" v-if="!showlists">Start</button>
    <ul v-if="showlists">
    <list v-for="(name, index) in chosenNames" :name="name" :key="'list-' index"></list>
    </ul>
</div>
 

И для нового экземпляра «Vue»

 let app = new Vue({
    el: "#app",
    data: {
        showlists: false,
        chosenNames: [
        { text: "name1" },
        { text: "name2" },
        { text: "name3" },
        ]
    },
    methods: {
        reveal: function() {
            this.showlists = true;
        }
    }
})
 

Я надеюсь, что это может решить проблему 🙂

в вашем коде есть 4 ошибки:

1. v-привязка-это атрибут элемента set, а не innerHTML
2. списки показа нуждаются в изменении.списки показа
3. showlists = true; всегда установлено на true
4. список не является допустимым html-тегом, вам нужен приведенный ниже правильный код:

 <div id="app">
    <button @click="reveal" v-if="!showlists">Start</button>
    <ul v-if="showlists">
    <li v-for="name in chosenNames" v-html="name"></li>
    </ul>
</div>
<script>
    let app = new Vue({
    el: "#app",
    data: {
        showlists: false,
        chosenNames: [
        { text: "name1" },
        { text: "name2" },
        { text: "name3" },
        ]
    },
    methods: {
        reveal: function() {
            this.showlists = !this.showlists;
        }
    }
})
</script>