Dans Vuejs, changez de classe d'un élément (ou changez son style) lorsque vous cliquez dessus

Question

La façon dont j'obtiens les données est un peu compliquée. J'ai un tableau "tweets" dans lequel je stocke des données, chaque tweet est une carte, en cliquant sur la carte, je réussis à changer le style (fonction markTweet), mais chaque tweet a également des réponses, qui sont affichées de la même manière que le tweet ( Chaque la réponse a sa propre carte-réponse). La façon dont j'obtiens les données du serveur :

let replies = []
for(const tweet of tweets) {
    let reply = await SQL('SELECT * FROM tweet_replies WHERE tweet_replies.conversation_id = ?', tweet.tweet_id)
    replies.push(reply)
}
    
const data = {
    tweets: tweets,
    page: parseInt(currentPage),
    numberOfPages: arr,
    replies
}

Ensuite, j'ai le composant en vue. Vous pouvez voir que les réponses sont stockées dans le tableau tweets pour chaque tweet, sous le nom tweetReplies. Dans la fonction markReply, j'ajoute avec succès l'identifiant au tableau.

<template>
  <div class="container-full">
    <div class="tweets-container">
      <div
        v-for="(tweet, i) in tweets"
        :key="tweet.id"
      >
        <div
          class="tweet-card"
          :class="{ selected: tweet.isSelected }"
          @click="markTweet(tweet.tweet_id, i)"
        >
          <div class="text">
            <p
              v-html="tweet.tweet_text"
            >
              {{ tweet.tweet_text }}
            </p>
          </div>
        </div>
        <div class="replies">
          <div
            v-for="(reply, index) in tweet.tweetReplies"
            :key="reply.tweet_id"
            @click="markReply(reply.tweet_id, index)"
          >
            <div class="tweet-card tweet-reply">
              <div class="text">
                <p>
                  {{ reply.tweet_text }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { getUserToken } from '@/auth/auth'
import moment from 'moment'
import { BFormTextarea, BButton, BFormSelect } from 'bootstrap-vue'

export default {
  components: { BFormTextarea, BButton, BFormSelect },
  data() {
    return {
      tweets: [],
      tweetActionIds: [],
      categories: [],
    }
  },
  beforeMount() {
    this.getTweets()
  },
  methods: {
    getTweets() {
      this.tweets = []
      const API_URL = `${this.$server}/api/twitter/tweets`

      const params = {
        token: getUserToken(),
        page: this.$route.query.page,
        newCurrentPage: newCurrent,
      }
      axios.post(API_URL, null, { params }).then(res => {
        this.currentPage = res.data.page
        this.numberOfPages = res.data.numberOfPages

        if (res.data) {
          res.data.tweets.forEach(tweet => {
            const tweetData = {
              id: tweet.id,
              tweet_id: tweet.tweet_id,
              tweet_text: htmlText,
              tweet_text_en: htmlTextEn,
              twitter_name: tweet.twitter_name,
              twitter_username: tweet.twitter_username,
              added_at: moment(String(tweet.added_at)).format(
                'MM/DD/YYYY hh:mm',
              ),
              URL: tweet.URL,
              isSelected: false,
              tweetReplies: [],
            }
            this.tweets.push(tweetData)
          })
          res.data.replies.forEach(reply => {
            reply.forEach(r => {
              this.tweets.forEach(tweet => {
                if (tweet.tweet_id === r.conversation_id) {
                  tweet.tweetReplies.push(r)
                }
              })
            })
          })
        }
      })
    },
    markTweet(tweetId, i) {
      const idIndex = this.tweetActionIds.indexOf(tweetId)
      this.tweets[i].isSelected = !this.tweets[i].isSelected
      if (this.tweetActionIds.includes(tweetId)) {
        this.tweetActionIds.splice(idIndex, 1)
      } else {
        this.tweetActionIds.push(tweetId)
      }
    },
    markReply(replyId) {
      const idIndex = this.tweetActionIds.indexOf(replyId)
      if (this.tweetActionIds.includes(replyId)) {
        this.tweetActionIds.splice(idIndex, 1)
      } else {
        this.tweetActionIds.push(replyId)
      }
    },
  },
}
</script>

J'ai essayé d'ajouter replySelected ，然后当在 markReply 中触发单击时，我将 replySelected aux données et je l'ai changé en vrai, mais chaque réponse au tweet a été sélectionnée, ce qui n'est pas ce que je veux.

Answer 1

Vous pouvez vous baser sur la réponse de Nikola, vérifiez simplement si elle se trouve dans l'étape supplémentaire de tweetActionIds 数组中，即可绕过向每条推文添加 isSelected puis faites de même et gardez-la propre en répondant

  

    

      

        

          

            

              {{ tweet.tweet_text }}
            
          
        
        

          

            

              

                
{{ reply.tweet_text }}
              
            
          
        
      
    
  
  {{tweetActionIds}}

const app = Vue.createApp({
  data() {
    return {
      tweets: []
      tweetActionIds: [],
      categories: [],
    }
  },
  methods: {
    markTweet(tweetId, i) {
      const idIndex = this.tweetActionIds.indexOf(tweetId)
      if (this.tweetActionIds.includes(tweetId)) {
        this.tweetActionIds.splice(idIndex, 1)
      } else {
        this.tweetActionIds.push(tweetId)
      }
    },
    markReply(replyId) {
      const idIndex = this.tweetActionIds.indexOf(replyId)
      if (this.tweetActionIds.includes(replyId)) {
        this.tweetActionIds.splice(idIndex, 1)
      } else {
        this.tweetActionIds.push(replyId)
      }
    },
    isSelected(tweet) {
      return this.tweetActionIds.includes(tweet.tweet_id);
    }
  },
})

Answer 2

Si j'ai bien compris, essayez l'extrait de code suivant :

const app = Vue.createApp({
  data() {
    return {
      tweets: [{id: 1, tweet_id: 1, isSelected: true, tweet_text: 'aaa', tweetReplies: [{tweet_id: 11, tweet_text: 'bbb'}, {tweet_id: 12, tweet_text: 'ccc'}]}, {id: 2, tweet_id: 2, isSelected: false, tweet_text: 'ddd', tweetReplies: [{tweet_id: 21, tweet_text: 'eee'}, {tweet_id: 22, tweet_text: 'fff'}]}],
      tweetActionIds: [],
    }
  },
  methods: {
    markTweet(tweetId, i) {
      const idIndex = this.tweetActionIds.indexOf(tweetId)
      this.tweets[i].isSelected = !this.tweets[i].isSelected
      if (this.tweetActionIds.includes(tweetId)) {
        this.tweetActionIds.splice(idIndex, 1)
      } else {
        this.tweetActionIds.push(tweetId)
      }
    },
    markReply(replyId) {
      const idIndex = this.tweetActionIds.indexOf(replyId)
      if (this.tweetActionIds.includes(replyId)) {
        this.tweetActionIds.splice(idIndex, 1)
      } else {
        this.tweetActionIds.push(replyId)
      }
    },
    checkReply(r) {
      return this.tweetActionIds.includes(r) ? true : false
    }
  },
})

app.mount('#demo')

.selected {color: red;}

sssccc

  

    

      

        

          

            

              {{ tweet.tweet_text }}
            
          
        
        

          

            

              

                
{{ reply.tweet_text }}
              
            
          
        
      
    
  
  {{tweetActionIds}}