简单的星星评分组件,我陷进去了...求解答一下

Question

<view>

    <view class="eval_box">

      <view v-for="(item, index) in ratetext" :key="index" class="rate_box">

        <text class="tx_wb">{{ item }}</text>

        <!-- for五条介绍 -->



        <view class="star_box">

          <view

            class="StarsWrap"

            v-for="(i, index) in list"

            :key="index"

            @click="clickStars(index)"

          >

            <!-- for 五个星星 -->

            <image :src="xing > index ? stara : starb"></image>

            <!-- 判断点的星星是第几个 大于的话用亮星 -->

          </view>



          <text style="color: #ff6200; font-size: 26rpx">{{

            rateScoreText

          }}</text>

        </view>

      </view>

    </view>

export default {
  name: "evaluate",
  data() {
    return {
      rateScoreText: "",
      rateScoreDesc: ["很不满意", "稍不满意", "一般", "满意", "很满意"],
      ratetext: [
        "送货司机",
        "搬运员工",
        "业务经理",
        "商品质量",
        "商品价格",
        "产品交货期",
      ],

      stara: "./../../static/image/20200708144629175.png", //亮星星
      list: [{
        scoredesc:'很不满意',
        xing:0
      },
      {
        scoredesc:'稍不满意',
        xing:1
      },
      {
        scoredesc:'一般',
        xing:2
      },
      {
        scoredesc:'满意',
        xing:3
      },
      {
        scoredesc:'很满意',
        xing:4
      },
      ],
      starb: "./../../static/image/20200708144629178.png", //暗星星
      xing: 0,
    };
  },
  methods: {
    clickStars(i) {
      this.rateScoreText = this.list[i].scoredesc;
      this.xing = i + 1;
      console.log(this. xing)
      // console.log("点击了" + (i + 1) + "颗星");
    },

我for出来 一点全亮了 我想一行归一行的去走..啥原因啊

Answer 1

xing应该存储到ratetext项对应的xing中，而不是所有的ratetext项都是用同一个xing，这样肯定是点击一个其他ratetext的项也变化了

大概改了下结构，对你有可以点击采纳支持下吗，谢谢~~有问题可以继续问，主要看加粗和下划线的地方

<view>
    <view class="eval_box">
        <view v-for="(item, rateindex) in ratetext" :key="index" class="rate_box">
            <text class="tx_wb">{{ item.text }}</text>
            <!-- for五条介绍 -->

            <view class="star_box">
                <view class="StarsWrap"
                      v-for="(i, index) in list"
                      :key="index"
                      @click="clickStars(index,rateindex)">
                    <!-- for 五个星星 -->
                    <image :src="item.xing > index ? stara : starb"></image>
                    <!-- 判断点的星星是第几个 大于的话用亮星 -->
                </view>

                <text style="color: #ff6200; font-size: 26rpx">
                    {{
            rateScoreText
                    }}
                </text>
            </view>
        </view>
    </view>
    <script>
        export default {
            name: "evaluate",
            data() {
                return {
                    rateScoreText: "",
                    rateScoreDesc: ["很不满意", "稍不满意", "一般", "满意", "很满意"],
                    ratetext: [
                        { text: "送货司机" ,xing:0},
                        { text: "搬运员工", xing: 0 },
                        { text: "业务经理", xing: 0 },
                        { text: "商品质量", xing: 0 },
                        { text: "商品价格", xing: 0 },
                        { text: "产品交货期", xing: 0 },
                    ],
                    stara: "./../../static/image/20200708144629175.png", //亮星星
                    list: [{
                        scoredesc: '很不满意',
                        xing: 0
                    },
                    {
                        scoredesc: '稍不满意',
                        xing: 1
                    },
                    {
                        scoredesc: '一般',
                        xing: 2
                    },
                    {
                        scoredesc: '满意',
                        xing: 3
                    },
                    {
                        scoredesc: '很满意',
                        xing: 4
                    },
                    ],
                    starb: "./../../static/image/20200708144629178.png", //暗星星
                    xing: 0,
                };
            },
            methods: {
                clickStars(i, rateindex) {
                    this.rateScoreText = this.list[i].scoredesc;
                    this.ratetext[rateindex].xing = i + 1;
                    console.log(this.xing)
                    // console.log("点击了" + (i + 1) + "颗星");
                }
            }
        }
    </script>