Question

我在所有复选框都为真时遇到问题。我尝试使用“假值”属性，但没有帮助。

我还有一个默认的输入复选框，它的功能正常。

export default {
  data() {
    return {
      straps: [],
      checkedColors: [],
      checkedSkins: [],
      checkedTypes: [],
      filterings: [{
          title: "Farver",
          filters: [{
              title: "Grøn",
              value: "grøn",
              model: "checkedColors"
            },
            {
              title: "Rød",
              value: "rød",
              model: "checkedColors"
            },
            {
              title: "Gul",
              value: "yellow",
              model: "checkedColors"
            },
            {
              title: "Lilla",
              value: "lilla",
              model: "checkedColors"
            },
            {
              title: "Blå",
              value: "blå",
              model: "checkedColors"
            },
            {
              title: "Grå",
              value: "grå",
              model: "checkedColors"
            },
            {
              title: "Sort",
              value: "sort",
              model: "checkedColors"
            },
            {
              title: "Hvid",
              value: "hvid",
              model: "checkedColors"
            },
            {
              title: "Brun",
              value: "brun",
              model: "checkedColors"
            }
          ]
        },
        {
          title: "Materialer",
          filters: [{
              title: "Alligator",
              value: "alligator",
              model: "checkedSkins"
            },
            {
              title: "Struds",
              value: "ostridge",
              model: "checkedSkins"
            },
            {
              title: "Teju firben",
              value: "teju",
              model: "checkedSkins"
            },
            {
              title: "Haj",
              value: "shark",
              model: "checkedSkins"
            }
          ]
        },
        {
          title: "Remme til",
          filters: [{
              title: "Universal",
              value: "universal",
              model: "checkedTypes"
            },
            {
              title: "Audemars Piguet",
              value: "ap",
              model: "checkedTypes"
            },
            {
              title: "Jaeger LeCoultre",
              value: "jlc",
              model: "checkedTypes"
            },
            {
              title: "Rolex",
              value: "rolex",
              model: "checkedTypes"
            }
          ]
        }
      ]
    };
  },
  computed: {
    filteredStraps() {
      var straps = this.straps;

      if (this.search !== null) {
        var straps = this.searchItems.filter(strap => {
          if (!this.search) return this.searchItems;
          return (
            strap.title.toLowerCase().includes(this.search.toLowerCase()) ||
            strap.skin.toLowerCase().includes(this.search.toLowerCase()) ||
            strap.type.toLowerCase().includes(this.search.toLowerCase())
          );
        });
      }

      if (this.checkedSkins.length > 0) {
        straps = straps.filter(strap => {
          return this.checkedSkins.includes(strap.skin.toLowerCase());
        });
      }
      if (this.checkedTypes.length > 0) {
        straps = straps.filter(strap => {
          return this.checkedTypes.includes(strap.type.toLowerCase());
        });
      }

      if (this.sort == "newest") {
        return straps.sort((a, b) => new Date(a.date) - new Date(b.date));
      }
      if (this.sort == "priceasc") {
        return straps.sort((a, b) => a.price > b.price);
      }
      if (this.sort == "pricedesc") {
        return straps.sort((a, b) => a.price < b.price);
      } else {
        return straps;
      }
    },
       getStraps() {
  db.collection("straps")
    .get()
    .then(querySnapshot => {
      const straps = [];
      querySnapshot.forEach(doc => {
        const data = {
          id: doc.id,
          title:
            doc
              .data()
              .type.charAt(0)
              .toUpperCase() +
            doc.data().type.slice(1) +
            " RIOS1931 " +
            doc
              .data()
              .title.charAt(0)
              .toUpperCase() +
            doc.data().title.slice(1) +
            " Urrem i " +
            doc
              .data()
              .skin.charAt(0)
              .toUpperCase() +
            doc.data().skin.slice(1),
          price: doc.data().price,
          skin: doc.data().skin,
          type: doc.data().type,
          imgs: doc.data().imgs[0].url,
          colors: doc.data().colors,
          date: doc
            .data()
            .date.toString()
            .slice(0, 15)
        };
        straps.push(data);
      });
      this.straps = straps;
    });
},
  }

<v-layout>
  <v-flex sm3 md2 class="hidden-xs-only text-xs-left">
    <p class="pl-4"><strong>Sortering</strong></p>
    <v-expansion-panel class="elevation-0">
      <v-expansion-panel-content v-for="filtering in filterings" :key="filtering.title">
        <div slot="header">{{filtering.title | capitalize}}</div>
        <v-card>
          <v-card-text>
            <v-list>
              <input type="checkbox" value="alligator" v-model="checkedSkins">
              <label for="checker"></label>
              <v-list-tile v-for="filter in filtering.filters" :key="filter.value">
                <v-list-tile-content>
                  <v-checkbox :input-value="filter.value" :label="filter.title" v-model="filter.model" color="primary"></v-checkbox>
                </v-list-tile-content>
              </v-list-tile>
            </v-list>
          </v-card-text>
        </v-card>
      </v-expansion-panel-content>
      <v-expansion-panel-content>
        <div slot="header">Pris</div>
        <v-card>
          <v-card-text>
            <v-layout>
              <v-flex px-2>
                <v-range-slider :min="slider[0]" :max="slider[1]" v-model="slider" thumb-label="always"></v-range-slider>
              </v-flex>
            </v-layout>
            <v-layout>
              <v-flex xs6 pr-2>
                <v-text-field label="Fra pris" v-model="slider[0]" class="mt-0" hide-details single-line type="number"></v-text-field>
              </v-flex>
              <v-flex xs6 pl-2>
                <v-text-field label="Til pris" v-model="slider[1]" class="mt-0" hide-details single-line type="number"></v-text-field>
              </v-flex>
            </v-layout>
          </v-card-text>
        </v-card>
      </v-expansion-panel-content>
    </v-expansion-panel>
  </v-flex>

</v-layout>

如前所述，默认输入可按预期工作，但是vuetify复选框由于某种原因均返回true，即使前端的属性值相同，它们也将无法工作。

Answer 1

如果您想将选中的对象存储为filter.value属性中的字符串，那么您的代码中有2个问题（第二个问题与您的问题有关）：

您的v-model指令中的值不正确。您将filter.model变量绑定到v-model 而不是其存储的数组名称，要解决此问题，您应该将v-model这样的变量传递给$data[filter.model]来绑定数组来自data的动态模型。
您错误地使用了input-value绑定。 input-value与v-model值相关（请参见v-checkbox源代码，它是默认模型的替代），您无需更改此值。因此，您需要将filter.value传递给value属性。

结果：

<v-checkbox :value="filter.value" :label="filter.title" v-model="$data[filter.model]" color="primary"></v-checkbox>

Vuetify组复选框返回所有true

1 个答案: