There are two different components in the vue 2.0 page that use the same component as a subcomponent, so there may be problems with the same id.

example:
father_1 component has a < xxx > subcomponent < / xxx > subcomponent
father_2 component also has a < xxx > subcomponent < / xxx > subcomponent

Sub-component < xxx > < / xxx > has a tag with id = "xxx_id"
if you don"t pay attention, there will be two id, with the same tag on the page. How can you avoid this situation?
Thank you for your comments.

Apr.10,2021

id is unique, without

find a way to replace it with something else, or className

< hr >

if you really need id, make it dynamic. : id= "getOwnerId" . The key of your two components must be different, so use key to make sure that the id is unique

.

after using the framework, id is basically out of use and is not recommended, because it is possible to encounter the situation you are talking about. If you need to access DOM, you should also use this.$el or this.$refs.XXX

.
<template>
    <div>
        <video id="video"/>
    </div>
<template>
<script>
...
    mounted(){
        videojs('video');
        // 
        // videojs(document.getElementById('video'));
    }
...
</script>
<template>
    <div>
        <video ref="video"/>
    </div>
<template>
<script>
...
    mounted(){
        videojs(this.$refs.video);
    }
...
</script>

ide/components-edge-cases.html-sharp%E8%AE%BF%E9%97%AE%E5%AD%90%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B%E6%88%96%E5%AD%90%E5%85%83%E7%B4%A0" rel=" nofollow noreferrer "> https://cn.vuejs.org/v2/guide.


you can pass in an internal id from outside, such as < xxx: domId= "xxx" > < / xxx >;
can be controlled externally, so you can avoid the id with the same two subcomponents;
upstairs is fine, use ref


if you simply add css styles, id is not unique but also can

using vue generally does not use id to do any interaction, so if you are lazy, you can ignore it, and if you have obsessive-compulsive disorder, you can change it to class,.


first of all, I want to know what id is used for. If you are writing a style, then style can add the scoped attribute. Again, your vue project is not built out of scaffolding.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b40734-2c52e.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b40734-2c52e.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?