Я использую Vue 2 и Vuetify (не Vue 3) для создания веб-сайта конструктора форм. У меня все шло отлично, пока я не обнаружил, что что-то не так. Так вот дело. Я визуализировал текстовые поля (входы) из реактивного массива, используя следующий код.
<template>
// ... some other unrelated code
<template v-if="answer.type !== 1">
<v-col
v-for="(_, i) in answer.options"
:key="`#question-${answer.id}-${i}`"
cols="12"
>
<div class="flex flex-row justify-between items-center">
<TextField
v-model="answer.options[i]"
class="ml-4"
label="Option"
underlined
hideLabel
/>
<v-btn @click="deleteOption(i)" icon>
<v-icon>mdi-close</v-icon>
</v-btn>
</div>
</v-col>
<v-col>
<TextButton @click="addOption()" text="+ ADD OPTION" />
</v-col>
</template>
// ... some other unrelated code
</template>
<script>
import { reactive, ref, watch } from '@vue/composition-api'
import useInquiry from '@/composables/useInquiry'
import TextButton from '@/components/clickables/TextButton.vue'
import TextField from '@/components/inputs/TextField.vue'
export default {
components: { TextField, TextButton },
setup() {
const { answer, addOption, deleteOption } = useInquiry()
return { answer, addOption, deleteOption }
}
}
</script>
Вот мое использование составной логики запроса
import { reactive, watch, se } from '@vue/composition-api'
import ID from '@/helpers/id'
export default () => {
const answer = reactive({
id: ID(), // this literally just generates an ID
type: 2,
options: ['', '']
})
const addOption = () => {
answer.options.push('')
}
const deleteOption = at => {
const temp = answer.options.filter((_, i) => i !== at)
answer.options = []
answer.options = temp
};
return { answer, addOption, deleteOption }
}
И, наконец, вот мой TextField.vue
<template>
<v-text-field
v-model="inputValue"
:label="label"
:single-line="hideLabel"
:type="password ? 'password' : 'text'"
:outlined="!underlined"
:dense="!large"
hide-details="auto"
/>
</template>
<script>
import { ref, watch } from '@vue/composition-api'
export default {
model: {
props: 'value',
event: 'change'
},
props: {
label: String,
value: String,
password: Boolean,
underlined: Boolean,
large: Boolean,
hideLabel: Boolean
},
setup(props, context) {
const inputValue = ref(props.value)
watch(inputValue, (currInput, prevInput) => {
context.emit('change', currInput)
})
return { inputValue }
}
}
</script>
Проблема в том, что каждый раз, когда нажимается кнопка удаления, удаленный ввод всегда является последним в массиве, даже если я не нажимал на последний. Я попытался зарегистрировать свой реактивный массив, наблюдая за ним с помощью метода отслеживания композиции Vue. Судя по всему, данные корректно обновляются. Проблема в том, что v-модель выглядит несинхронизированной, и последний вход всегда тот, который удаляется.