Как правильно добавлять компоненты на vue3?

Question

[faynster]

У меня есть компонент "blockTest.vue" где находится кнопка "+" при клике на нее должен добавляться компонент answer. Сделал но работает.

blockTest.vue

<template>
    <div class="block__test">
        <div class="test__true">
            <div class="true__inner">
                <span>Првильный ответ</span>
                <button @click="addAnswer">+</button>
            </div>

            <answer
                v-for="answer in answers"
                :answer="answer"
                :key="answer.id"
            />
        </div>
        <div class="test__false">
            <div class="false__inner">
                <span>Не првильный ответ</span>
                <button>+</button>
            </div>
            <answer/>
        </div>
    </div>
</template>

<script>
export default {
    name: 'blockTest',
    
    props: {
        answers: {
            type: Array,
            required: true,
        }
    },
    data(){
        return {
            answers: [
             
           ]
        }
    },
    methods: {
        addAnswer(answer){
            this.answer.id = Date.now();
            this.answers.push(answer);
        }
    }
}
</script>

answer.vue

<template>
    <form class="text__inner">
        <input
            v-model="text"
            v-if="isElVisible"
            @change="showTextarea"
            class="input"
        />


        <p
            @click="showTextarea"
            v-else
        >
            {{header}}
            {{text}}

        </p>
    </form>
</template>

<script>
export default {
    name: 'answer',
    data(){
        return {
            text:'',
            header: 'Введите ответ',
            isElVisible: false,
        }
    },
    methods:{
        showTextarea(){
            this.isElVisible = !this.isElVisible;
            this.header = '';
        }
    }
}
</script>

Только не давно начал осваивать вью, не ругайте сильно пожалуйста если полный бред..

Answer 1

[WapSter]

1) Компоненты нужно называть как минимум двумя словами.
2)

addAnswer(answer){
            this.answer.id = Date.now();
            this.answers.push(answer);
        }

this.answers у тебя props нельзя модифицировать props нужно, одавать данные на ружу, чтобы родитель их обработал и вернул новое значение в props.
3) this.answer.id откуда у тебя взялась вообще это свойство answer, в коде его нет.
4)

props: {
        answers: {
            type: Array,
            required: true,
        }
    },
    data(){
        return {
            answers: [
             
           ]
        }
    },

пропа и свойство в data не могут иметь одинаковые имена
5)

<answer
                v-for="answer in answers"
                :answer="answer"
                :key="answer.id"
            />

Откуда взялась пропа answer если в компоненте ее нет.

Обо всех этих ошибках тебе еще в логе vue должен был сообщить.

Comments

[faynster]

первое я понял.
остальное...
я хотел при добавлении нового answer что бы ему присваивался id, что бы в будущем удалять его

[WapSter]

faynster, у массива не может быть свойств у объектов, есть свойства. Эмить наружу событие, снаружи уже добавляй новый объект со свойством id. У тебя в голове и со vue каша, и полное незнания основ js

[imko]

Как будто в блокноте код писал, столько ошибок должно было случиться при компиле...

[faynster]

imko,
runtime-core.esm-bundler.js?d2dd:218 Uncaught TypeError: Cannot set properties of undefined (setting 'id')
at Proxy.addAnswer (blockTest.vue?4696:39:1)
at onClick._cache.._cache. (blockTest.vue?4696:6:1)
at callWithErrorHandling (runtime-core.esm-bundler.js?d2dd:155:1)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?d2dd:164:1)
at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js?2725:366:1)
addAnswer @ blockTest.vue?4696:39
onClick._cache.._cache. @ blockTest.vue?4696:6
callWithErrorHandling @ runtime-core.esm-bundler.js?d2dd:155
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?d2dd:164
invoker @ runtime-dom.esm-bundler.js?2725:366

Просто не знаю какой тут тег использовать чтобы нормально вью отобразить

[WapSter]

faynster, никакой, тебе нужно сначала освоить js и научиться бороться с его ошибками, а потом переходить ко vue