Vue / Vuex / Vuetify всегда устанавливает для свойства моих javascript объектов значение false - PullRequest
Новая
       23

Vue / Vuex / Vuetify всегда устанавливает для свойства моих javascript объектов значение false

0 голосов
/ 10 июля 2020

Я пытаюсь написать небольшой список покупок в vue / vuex с express и postgresql. Данные из моей базы данных выглядят следующим образом: 

[
 {
  id: '36',
  name: 'Eggs',
  created_at: null,
  pieces: null,
  finished: true
},
{
  id: '38',
  name: 'Cucumber',
  created_at: null,
  pieces: null,
  finished: false
},
{
  id: '37',
  name: 'Milk',
  created_at: null,
  pieces: null,
  finished: false
},
{
  id: '39',
  name: 'Little Eggs',
  created_at: null,
  pieces: null,
  finished: true
}

]

Теперь у меня проблема, если я получаю данные в моем vue приложении, свойство done всех элементов является ложным и я не знаю почему. Я пробовал несколько вещей и думаю, что модель vue в моем vue -list-item - это то, почему она не работает, но почему? Вот мой код vue: 

     <template>
      <v-row>
       <v-container>
        <v-card class="overflow-y-auto">
         <v-app-bar color="secondary" class="black--text">
          <v-toolbar-title>Insert Item:</v-toolbar-title>

           <v-text-field
             v-model="name"
             v-on:keyup.enter="onSubmit"
             hide-details
             single-line
             class="ps-3"
             color="black"
             ></v-text-field>
            <v-btn icon @click="onSubmit">
             <v-icon>fas fa-check</v-icon>
            </v-btn>
        </v-app-bar>
        <v-container>
          <v-row>
            <v-col lg12 md12 s12 xs12>
              <v-card-text>
                <v-list subheader two-line shaped style="max-height: 500px" class="overflow-y-auto">
                 <v-subheader>Shoping List:</v-subheader>

                   <v-list-item-group multiple v-model="settings" color="accent">
                     <v-list-item
                      v-for="item in allitems"
                      :key="item.id"
                      v-model="item.finished"
                     >
                     <template v-slot:default="{ active, toggle }">
                       <v-list-item-action>
                         <v-checkbox :input-value="active" color="accent" @click="toggle"></v-checkbox>
                         </v-list-item-action>

                        <v-list-item-content>
                        <v-list-item-title :class="{finished: item.finished}">{{item.name}}</v-list-item-title>
                      <v-list-item-subtitle :class="{finished: item.finished}">{{item.count}}</v-list-item-subtitle>
                    </v-list-item-content>
                  </template>
                </v-list-item>
              </v-list-item-group>
            </v-list>
          </v-card-text>
        </v-col>
      </v-row>
    </v-container>
  </v-card>
</v-container>

     <script>
     // @ is an alias to /src
     import { mapGetters, mapActions } from "vuex";

     export default {
     name: "ShopingList",
     components: {},
     data: () => ({
     settings: [],
     name: ""
    }),
    methods: {
    ...mapActions(["fetchitems", "additem"]),

   onSubmit(e) {
   e.preventDefault(), console.log(this.name);
   this.additem(this.name);
   this.item = "";
  },

  update() {
    console.log("update was clicked!");
  }
},
computed: mapGetters(["allitems"]),

created() {
  this.fetchitems();
}
};

 <style >
  .finished {
    text-decoration: line-through;
  }

  </style>

, если я удалю v-модель из v-list-item, все будет работать нормально, и я получу правильные данные, но тогда я могу Не меняем готовое свойство из элемента. Я хочу, чтобы, если я щелкну по списку, флажки изменились на нажатие, а имя элемента было перечеркнуто. Затем обновите базу данных, и если я обновлю sh страницу, элементы со свойством finished = true должны быть вычеркнуты. Но теперь, если я обновлю sh страницу, все готовые свойства будут ложными, но ни один элемент не будет перечеркнут.

...