{{ tweet.tweet_text }}
Rumah > Soal Jawab > teks badan
Cara saya mendapatkan data agak rumit. Saya mempunyai susunan "tweet" di mana saya menyimpan data, setiap tweet adalah kad, apabila mengklik pada kad saya berjaya menukar gaya (fungsi markTweet), tetapi setiap tweet juga mempunyai balasan, yang dipaparkan sama seperti tweet ( Setiap reply mempunyai kad balasan sendiri). Cara saya mendapatkan data daripada pelayan:
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 }
Kemudian saya mempunyai komponen dalam vue. Anda boleh melihat bahawa balasan disimpan dalam susunan tweet untuk setiap tweet, sebagai tweetReplies. Dalam fungsi markReply saya berjaya menambah id pada tatasusunan.
<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>
Saya cuba menambah replySelected
,然后当在 markReply 中触发单击时,我将 replySelected
pada data dan menukarnya kepada benar, tetapi kemudian setiap balasan kepada tweet itu dipilih, yang bukan yang saya mahukan.
P粉0249861502024-04-01 15:42:07
Anda boleh membina jawapan Nikola, cuma semak sama ada ia berada dalam langkah tambahan tweetActionIds
数组中,即可绕过向每条推文添加 isSelected
kemudian lakukan perkara yang sama dan pastikan ia bersih dengan membalas
{{tweetActionIds}}{{ tweet.tweet_text }}
{{ reply.tweet_text }}
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); } }, })
P粉2450036072024-04-01 10:49:56
Jika saya faham dengan betul, cuba coretan kod berikut:
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{{tweetActionIds}}{{ tweet.tweet_text }}
{{ reply.tweet_text }}