亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Table of Contents
Why is the id unique in vue3, but input is displayed at the same time?
Subcomponent code
Parent component code
Home Web Front-end JS Tutorial How to ensure that only the current message displays the edit box when clicking on a different message?

How to ensure that only the current message displays the edit box when clicking on a different message?

Apr 04, 2025 pm 04:51 PM
vue git tool ai click event Why

Why is the id unique in vue3, but input is displayed at the same time?

When using vue3 to develop chat record editing function, we encountered a problem: although the id of each message is unique, every time a different message is clicked for editing, all the edited messages are displayed, rather than only the currently clicked message displaying the edit box. This question is very confusing to me because I have made sure that the meg_id for each message is independent and that the meg_id is also correctly obtained when clicking.

The problem is described as follows: What I want to achieve is that when clicking the first message for editing, when clicking the second message, the edit box of the first message should be closed, and only the edit box of the second message should be displayed to achieve a mutually exclusive effect.

The following is the specific implementation process:

Subcomponent code

 <!-- Edit text content-->
<div class="chat-container" v-if="props.dialogdata.showeditcontent && changesgid">
    <div class="chat-input-box">
        <div class="top-boxes" v-loading="contentloading">
            <el-input ref="textinput" id="chat-input" autosize v-model="editcontent" type="textarea" :placeholder="$t('text_send_to')"></el-input>
        </div>
    </div>
    <div class="input-tips">
        esc key<span class="pub-color">Cancel</span> · Enter key<span class="pub-color">Save</span>
    </div>
</div>
<div v-else :class="['dc-chat-content', props.dialogdata.author.bot ? 'dc-chat-bot-content' : '']">
    <!-- Toolbar Rendering-->
    <el-popover placement="right" :visible="toolsvisible" :offset="1" :show-arrow="false" popper-class="custom-popper" :teleported="false">
        <div v-if="!props.dialogdata.checked" class="more">
            <el-button-group>
                <el-tooltip v-for="item in menuitems" :key="item.id" effect="dark" :content="item.title" placement="top">
                    <el-button :icon="item.icon" size="small" :disabled="item.id === '2' && (userinfo.username !== props.dialogdata.author.username || !boolean(props.dialogdata.content))"></el-button>
                </el-tooltip>
            </el-button-group>
        </div>
        <!-- Omit other codes--><p> The script part of the child component:</p>
<pre class="brush:php;toolbar:false"> const props = defineprops<dcdialogitemprops>()
const emit = defineemits()
const menuitems = [
  {
    id: '1',
    icon: 'finished',
    title: $t('text_multiple_choice')
  },
  {
    id: '2',
    icon: 'edit',
    title: $t('btn_edit')
  },
  {
    id: '3',
    icon: 'chatdotsquare',
    title: $t('btn_reply')
  }
]

// Handle menu item click event const editcontent = ref('')
const changesgid = ref('')
const currentediting = ref(false) // Used to mark whether the form is submitting const handleselect = (val: string) => {
  if(val === '1') {
    props.dialogdata.checked = true
  } else if (val === '2') {
    console.log('--handleselect---2', props.dialogdata);
    props.dialogdata.isediting = true
    currentediting.value = false
    editcontent.value = props.dialogdata.content
    changesgid.value = props.dialogdata.msg_id
  }
  emit('menuclick', val, props.dialogdata)
}</dcdialogitemprops>

Parent component code

 <dcdialogitem v-for="item in messagelist" class="pulldown-list-item" :key="item.msg_id" :dialog-data="item" :id="'msg' item.msg_id"></dcdialogitem>

The data format of messagelist is as follows:

 [
    {
        "msg_id": "1276491426334769232",
        "content": "Oh, loudly",
        "checked": false
    },
    {
        "msg_id": "1276493284222701702",
        "content": "asdasdaasdsadasd",
        "checked": false
    },
    ...Omitted]

The script part of the parent component:

 const handlemenuclick = (val: string, dialogdata: any) => {
  if(val === '1') {
    messagelist.value.foreach((item) => {
      item.checked = true
    })
    showrecords.value = true
    showreplymsg.value = false
    dialogdata.showeditcontent = false
  } else if(val === '2') {
    showreplymsg.value = false
    replyauthor.value = ''
    showrecords.value = false
    dialogdata.showeditcontent = true
  } else if(val === '3') {
    showreplymsg.value = true
    dialogdata.showeditcontent = false
    replyauthor.value = dialogdata.author.username
    replycontent.value = dialogdata.content
  }
}

To solve this problem, the first thing to understand is that the showeditcontent property is set in the parent component. When a message is clicked, the handlemenuclick function will set the showeditcontent of the message to true. However, this does not close the edit box for other messages.

To achieve mutually exclusive effect, we need to set the showeditcontent of all other messages to false when clicking on a new message for editing. You can modify the handlemenuclick function of the parent component, as shown below:

 const handleMenuClick = (val: string, dialogData: any) => {
  if(val === '1') {
    messageList.value.forEach((item) => {
      item.checked = true
      item.showEditContent = false
    })
    showRecords.value = true
    showReplyMsg.value = false
  } else if(val === '2') {
    messageList.value.forEach((item) => {
      item.showEditContent = false
    })
    showReplyMsg.value = false
    replyAuthor.value = ''
    showRecords.value = false
    dialogData.showEditContent = true
  } else if(val === '3') {
    messageList.value.forEach((item) => {
      item.showEditContent = false
    })
    showReplyMsg.value = true
    replyAuthor.value = dialogData.author.username
    replyContent.value = dialogData.content
  }
}

Through the above modifications, each time a new message is clicked to edit, the editing box of other messages will be closed, thus achieving a mutually exclusive effect. In this way, although the id is unique, the input box will display only the edit box of the currently clicked message as we expect.

The above is the detailed content of How to ensure that only the current message displays the edit box when clicking on a different message?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undress AI Tool

Undress AI Tool

Undress images for free

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What is Ethereum? What are the ways to obtain Ethereum ETH? What is Ethereum? What are the ways to obtain Ethereum ETH? Jul 31, 2025 pm 11:00 PM

Ethereum is a decentralized application platform based on smart contracts, and its native token ETH can be obtained in a variety of ways. 1. Register an account through centralized platforms such as Binance and Ouyiok, complete KYC certification and purchase ETH with stablecoins; 2. Connect to digital storage through decentralized platforms, and directly exchange ETH with stablecoins or other tokens; 3. Participate in network pledge, and you can choose independent pledge (requires 32 ETH), liquid pledge services or one-click pledge on the centralized platform to obtain rewards; 4. Earn ETH by providing services to Web3 projects, completing tasks or obtaining airdrops. It is recommended that beginners start from mainstream centralized platforms, gradually transition to decentralized methods, and always attach importance to asset security and independent research, to

What are the websites for real-time price query of Bitcoin? Recommended websites that can view Bitcoin K-line and depth chart What are the websites for real-time price query of Bitcoin? Recommended websites that can view Bitcoin K-line and depth chart Jul 31, 2025 pm 10:54 PM

In the digital currency market, real-time mastering of Bitcoin prices and transaction in-depth information is a must-have skill for every investor. Viewing accurate K-line charts and depth charts can help judge the power of buying and selling, capture market changes, and improve the scientific nature of investment decisions.

How to check the main trends of beginners in the currency circle How to check the main trends of beginners in the currency circle Jul 31, 2025 pm 09:45 PM

Identifying the trend of the main capital can significantly improve the quality of investment decisions. Its core value lies in trend prediction, support/pressure position verification and sector rotation precursor; 1. Track the net inflow direction, trading ratio imbalance and market price order cluster through large-scale transaction data; 2. Use the on-chain giant whale address to analyze position changes, exchange inflows and position costs; 3. Capture derivative market signals such as futures open contracts, long-short position ratios and liquidated risk zones; in actual combat, trends are confirmed according to the four-step method: technical resonance, exchange flow, derivative indicators and market sentiment extreme value; the main force often adopts a three-step harvesting strategy: sweeping and manufacturing FOMO, KOL collaboratively shouting orders, and short-selling backhand shorting; novices should take risk aversion actions: when the main force's net outflow exceeds $15 million, reduce positions by 50%, and large-scale selling orders

Ethereum ETH latest price APP ETH latest price trend chart analysis software Ethereum ETH latest price APP ETH latest price trend chart analysis software Jul 31, 2025 pm 10:27 PM

1. Download and install the application through the official recommended channel to ensure safety; 2. Access the designated download address to complete the file acquisition; 3. Ignore the device safety reminder and complete the installation as prompts; 4. You can refer to the data of mainstream platforms such as Huobi HTX and Ouyi OK for market comparison; the APP provides real-time market tracking, professional charting tools, price warning and market information aggregation functions; when analyzing trends, long-term trend judgment, technical indicator application, trading volume changes and fundamental information; when choosing software, you should pay attention to data authority, interface friendliness and comprehensive functions to improve analysis efficiency and decision-making accuracy.

BTC digital currency account registration tutorial: Complete account opening in three steps BTC digital currency account registration tutorial: Complete account opening in three steps Jul 31, 2025 pm 10:42 PM

First, select well-known platforms such as Binance Binance or Ouyi OKX, and prepare your email and mobile phone number; 1. Visit the official website of the platform and click to register, enter your email or mobile phone number and set a high-strength password; 2. Submit information after agreeing to the terms of service, and complete account activation through the email or mobile phone verification code; 3. After logging in, complete identity authentication (KYC), enable secondary verification (2FA), and regularly check security settings to ensure account security. After completing the above steps, you can successfully create a BTC digital currency account.

btc trading platform latest version app download 5.0.5 btc trading platform official website APP download link btc trading platform latest version app download 5.0.5 btc trading platform official website APP download link Aug 01, 2025 pm 11:30 PM

1. First, ensure that the device network is stable and has sufficient storage space; 2. Download it through the official download address [adid]fbd7939d674997cdb4692d34de8633c4[/adid]; 3. Complete the installation according to the device prompts, and the official channel is safe and reliable; 4. After the installation is completed, you can experience professional trading services comparable to HTX and Ouyi platforms; the new version 5.0.5 feature highlights include: 1. Optimize the user interface, and the operation is more intuitive and convenient; 2. Improve transaction performance and reduce delays and slippages; 3. Enhance security protection and adopt advanced encryption technology; 4. Add a variety of new technical analysis chart tools; pay attention to: 1. Properly keep the account password to avoid logging in on public devices; 2.

Stablecoin purchasing channel broad spot Stablecoin purchasing channel broad spot Jul 31, 2025 pm 10:30 PM

Binance provides bank transfers, credit cards, P2P and other methods to purchase USDT, USDC and other stablecoins, with fiat currency entrance and high security; 2. Ouyi OKX supports credit cards, bank cards and third-party payment to purchase stablecoins, and provides OTC and P2P transaction services; 3. Sesame Open Gate.io can purchase stablecoins through fiat currency channels and P2P transactions, supporting multiple fiat currency recharges and convenient operation; 4. Huobi provides fiat currency trading area and P2P market to purchase stablecoins, with strict risk control and high-quality customer service; 5. KuCoin supports credit cards and bank transfers to purchase stablecoins, with diverse P2P transactions and friendly interfaces; 6. Kraken supports ACH, SEPA and other bank transfer methods to purchase stablecoins, with high security

USDT virtual currency purchase process USDT transaction detailed complete guide USDT virtual currency purchase process USDT transaction detailed complete guide Aug 01, 2025 pm 11:33 PM

First, choose a reputable trading platform such as Binance, Ouyi, Huobi or Damen Exchange; 1. Register an account and set a strong password; 2. Complete identity verification (KYC) and submit real documents; 3. Select the appropriate merchant to purchase USDT and complete payment through C2C transactions; 4. Enable two-factor identity verification, set a capital password and regularly check account activities to ensure security. The entire process needs to be operated on the official platform to prevent phishing, and finally complete the purchase and security management of USDT.

See all articles