Ответы пользователя по тегу Vue.js
  • Не могу удалить элемент input из списка - всегда удаляется последний?

    Lastor
    @Lastor
    В чем сила, брат? В ньютонах.
    Так происходит потому, что на какую бы из кнопок вы не нажали, происходит вызов метода delete1 с кодом this.todos.splice(0, 1);
    То есть, он не знает какая именно кнопка нажата, но знает, что надо выполнить splice(0, 1).

    Чтобы изменить это поведение, следует в метод delete1 передать индекс элемента, который требуется удалить:
    <button v-on:click="delete1(i)">
    delete1: function(i){
        	this.todos.splice(0, 1); // Измените splice(0, 1) таким образом, чтобы из массива удалялся элемент с индексом i
        }
    Ответ написан
  • Как получить функцию из родительского компонента?

    Lastor
    @Lastor
    В чем сила, брат? В ньютонах.
    Добавьте provide и inject в родителя и потомка
    // parent component
    provide('isAllUploading', isAllUploading)
    
    // child component
    const isAllUploading = inject('isAllUploading')
    Ответ написан
    Комментировать
  • Как из динамической формы Vue передать в Laravel данные в определенном порядке?

    Lastor
    @Lastor
    В чем сила, брат? В ньютонах.
    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 });
        }
    Ответ написан
    1 комментарий
  • Inject/provide как сделать это красиво?

    Lastor
    @Lastor
    В чем сила, брат? В ньютонах.
    Красота не является свойством объекта. Она существует в сознании реципиента.
    Попробуйте избрать иные критерии. Например, работоспособность, масштабируемость, читаемость.
    Inject/provide вкупе с compositionApi - очень красивый, на мой взгляд, инструмент.
    Главная беда, я думаю, в том, что достаточно непросто своевременно прогнозировать иерархию компонентов, лайаутов и роутов. Отсюда и вознкиают всякие страдашки с шинами и сторами даже в задачах, которые порой можно решить и без них.
    Ответ написан
    Комментировать
  • Как правильно рендерить контент?

    Lastor
    @Lastor
    В чем сила, брат? В ньютонах.
    Если это учебное задание, то оно из двух разных не связанных тем.
    Куда прописывать @click?
    Тем элементам меню, от которых вы хотите реакции от клика.

    При нажатии на определённый элемент меню, должно отображаться определённый контент
    В простом случае достаточно, чтобы в коде были все элементы, возможные для отображения. К каждому из них добавляйте условие при котором он должен отображаться.
    Например:

    spoiler
    <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? куда прописывать и как менять его?

    Это не свойство. Это класс, который можно применить по условию.
    Напрмер:
    spoiler
    :class="selectedEl !== 1 ? 'extraClass' : 'extraClass' + ' active'"
    <style>
    .active {
    color: red;
    }
    </style>
    Ответ написан
    Комментировать
  • Как передать пропсы через роутинг?

    Lastor
    @Lastor
    В чем сила, брат? В ньютонах.
    Во vue3 вы можете применить provide-inject.
    В родителе:
    const selected = ref({содержимое объекта})
    provide('selected', selected)

    В детях, внуках, правнуках:
    const selected = inject('selected')
    Ответ написан
    Комментировать
  • В какой момент срабатывает watch во vue 3 при множественном source?

    Lastor
    @Lastor
    В чем сила, брат? В ньютонах.
    const trigger = ref(false) //for watch
    
    function somePiniaAction() {
       var1.value = "1"
       var2.value = "2"
       var3.value = "3"
       trigger.value = !trigger.value
    }
    Ответ написан
    4 комментария
  • Как при работе с Echo проверить имеется ли подключение к сокету или нет?

    Lastor
    @Lastor
    В чем сила, брат? В ньютонах.
    Если вы хотите избавиться от избыточных срабатываний при переключении между компонентами, то их общую логику целесообразно разместить в общем для них родителе.
    CompositionApi позволит без особых усилий наладить между ними связь посредством ref(), provide() и inject().
    Ответ написан
    Комментировать
  • Как сделать счетчик chekbox, в поле methods?

    Lastor
    @Lastor
    В чем сила, брат? В ньютонах.
    я буду считывать лишь длину списка

    В большинстве случаев, массив со значениями придётся вернуть на сервер.
    Поэтому не надо ничего из него удалять или добавлять.
    Передавать через emit ничего не нужно. Если правильно сделать, всё передаётся само.
    Родитель
    <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>

    64959a335994e094974052.png
    Ответ написан
    Комментировать
  • Как вызвать перерисовку компонента при изменении во VueX?

    Lastor
    @Lastor
    В чем сила, брат? В ньютонах.
    Как сделать так, чтобы 2 компонент отслеживал изменения, но при этом я мог с ними работать и менять данные.

    Для данного случая достаточно, чтобы оба компонента имели общего родителя и использовать синтаксис <script setup>

    Из родителя вы можете передать TaskList либо через prop либо через provide/inject и делать с ним всё что нужно, не потеряв реактивность.

    //родитель
    const TaskList = ref([])
    provide('TaskList',  TaskList)
    
    //потомок
    const TaskList = inject('TaskList')

    ЗЫ

    The official state management library for Vue has changed to Pinia.

    https://vuex.vuejs.org/
    Ответ написан
  • Какая есть библиотека времени для Nuxt?

    Lastor
    @Lastor
    В чем сила, брат? В ньютонах.
    обновлялась 3 года назад

    Иногда это не плохо, а хорошо.
    Способы измерения времени за последние 100 лет не особо изменились.
    moment прекрасно работает.
    Ответ написан
    Комментировать