Question

我正在尝试创建一个用户反馈表，用户可以在其中对他们订购的食品的质量进行评分。我有一个tmp <- tibble(x = 1:7, y = c("No", "Yes", NA, "Yes", "Yes", "Yes", "No")) tmp_new <- as_tibble(ifelse(is.na(tmp) == T,NA, ifelse(tmp == "No",0,1)))数组，可以显示食物清单，并且对食物有一定的反应。我正在尝试添加一种方法，以便用户可以提供反馈，但用户一次只能设置一个反应。因此，例如，对于Pizza，它们可以是foodItems或satisfied，并且应该突出显示所选的反应，依此类推，但是我不确定我该怎么做。

查看此示例codepen。

查看此工作示例：-

dissatisfied

new Vue({
  el: "#app",
  data() {
    return {
      reaction: false,
      selectedReaction: "",
      foodItems: [{
          name: "Pizza",
          value: "pizza"
        },
        {
          name: "Pasta",
          value: "pasta"
        }
      ]
    };
  },
  methods: {
    setReaction() {
      this.reaction = !this.reaction;
    }
  }
});

因此，基本上，我正在尝试为用户添加对食物进行评分的功能。任何帮助将不胜感激。非常感谢。

Answer 1

有很多方法可以解决这个问题，但是最后，您需要为每种食品存储等级。

我在实现中所做的事情是创建一个用于评级selectedReaction的数组，该数组将存储1, -1, undefined之一。每当您为foodItems中的任何食物，食物的索引添加任何等级时，对于selectedReaction中相同的索引，我为正面反馈添加1，对于负面反馈为-1。

<div id="app">
<v-app id="inspire">
    <v-container>
    <v-layout row wrap justify-center>
        <v-flex xs6 v-for="(food,index) in foodItems" :key="index">
        <h1>{{ food.name }}</h1>
        <v-icon large left :color="selectedReaction[index] === -1 ? 'primary' : ''" @click="setReaction(index, false)">sentiment_dissatisfied</v-icon>
        <v-icon large :color="selectedReaction[index] === 1 ? 'primary' : ''" @click="setReaction(index, true)">sentiment_very_satisfied</v-icon>  

        </v-flex>
    </v-layout>
    </v-container>
</v-app>
</div>


new Vue({
    el: "#app",
    data() {
    return {
        selectedReaction: [],
        foodItems: [
        {
            name: "Pizza",
            value: "pizza"
        },
        {
            name: "Pasta",
            value: "pasta"
        }
        ]
    };
    },
    methods: {
    setReaction(index, isSatisfied) {
        const reaction = [...this.selectedReaction];
        reaction[index] = isSatisfied ? 1 : -1;
        this.selectedReaction = reaction;
    }
    }
});

Answer 2

最简单的方法是使用isSatisfied之类的布尔值，如果用户不满意则为false，如果满足则为true，如果未提供任何信息则为undefined。

此问题是，如果您编写if(isSatisfied)并且未定义该标志，则代码流转到else块。所以你应该写类似

if(isSatisfied)
     //satisfied
if(isSatisfied === false)
     //unsatisfied

另一种选择是使用字符串，您可以存储字符串feedback，可以是undefined，'satisfied'或'unsatisfied'。

您可以使用数字进行相同操作。

后一种选择更加灵活，因为您可以在不更改模型的情况下“升级”反馈系统（显然在一定范围内）。

标记/字符串/数字必须存储在某个地方。您可以创建一个新的对象反馈数组，每个对象包含：

食物参考
用户参考
用户评分

Answer 3

The main concern is you need to have a reaction corresponding to each food item, so add a reaction/feedback property with each food item. Notice individual feedback change. There can be so many other approaches as well.

    https://codepen.io/pjain-techracers/pen/abvXPwK

在数组VueJS中切换对象的属性？

3 个答案: