this.todos.splice(0, 1);<button v-on:click="delete1(i)">delete1: function(i){
this.todos.splice(0, 1); // Измените splice(0, 1) таким образом, чтобы из массива удалялся элемент с индексом i
}store() {
// Создайте новый объект для передачи на сервер
const formattedTranslations = {};
// Пройдитесь по всем локалям и создайте нужную структуру данных
for (const locale of this.locales) {
formattedTranslations[locale] = {
title: this.translations.title[locale],
desc: this.translations.desc[locale],
};
}
console.log(formattedTranslations);
// Отправьте данные на сервер
this.$inertia.post(route('post.store'), { translations: formattedTranslations });
}Куда прописывать @click?Тем элементам меню, от которых вы хотите реакции от клика.
При нажатии на определённый элемент меню, должно отображаться определённый контентВ простом случае достаточно, чтобы в коде были все элементы, возможные для отображения. К каждому из них добавляйте условие при котором он должен отображаться.
<template>
<MenuSection @click="selectedEl = 1"></MenuSection>
<MenuSection @click="selectedEl = 2"></MenuSection>
<div v-if="selectedEl === 1"></div>
<div v-if="selectedEl === 2"></div>
</template>
<script setup>
const selectedEl = ref(0)
</script>Нужно ли дополнительное свойство active? куда прописывать и как менять его?
:class="selectedEl !== 1 ? 'extraClass' : 'extraClass' + ' active'"
<style>
.active {
color: red;
}
</style>const trigger = ref(false) //for watch
function somePiniaAction() {
var1.value = "1"
var2.value = "2"
var3.value = "3"
trigger.value = !trigger.value
}я буду считывать лишь длину списка
<template>
<Test1Child></Test1Child>
</template>
<script setup>
import Test1Child from "components/Test/Test1Child.vue";
import {provide, ref} from "vue";
const persons = ref([
{id: 1, name: 'Василенко Пётр Владимирович', checked: true},
{id: 2, name: 'Ерёменко Владислав Игоревич', checked: false},
{id: 3, name: 'Антонова Елена Сергеевна', checked: true},
])
provide('persons', persons)
</script><template>
<div class="divRadio">
<template v-for="person in persons" :key="person.id">
<Test1Person :person="person"></Test1Person>
</template>
</div>
<div>Отмечено:{{ countCheckedPersons }}</div>
</template>
<script setup>
import {computed, inject} from "vue";
import Test1Person from "components/Test/Test1Person.vue";
const persons = inject('persons')
const countCheckedPersons = computed(() => {
return persons.value.filter(el => el.checked === true).length
})
</script><template>
<div class="divus" style="margin-top: 0px;">
<input type="checkbox"
:id="'name' + personMutable.id"
:value="personMutable.id"
class="checkus"
:checked="personMutable.checked"
@change="personMutable.checked = !personMutable.checked"
/>
<label :for="'name' + personMutable.id" class="labelus">{{ personMutable.name }}</label>
</div>
</template>
<script setup>
import {ref} from "vue";
const props = defineProps({
person: Object
})
const personMutable = ref(props.person)
</script>
Как сделать так, чтобы 2 компонент отслеживал изменения, но при этом я мог с ними работать и менять данные.
<script setup>//родитель
const TaskList = ref([])
provide('TaskList', TaskList)
//потомок
const TaskList = inject('TaskList')