Определение области видимости HTML-элемента в компоненте Vue - PullRequest
Новая
       14

Определение области видимости HTML-элемента в компоненте Vue

0 голосов
/ 14 июня 2019

Существует ли какой-то встроенный механизм видимости для компонента Vue в том смысле, что значение атрибута id элемента html внутри компонента Vue может быть однозначно определено без усилий программиста сделать это?

В следующем коде ясоздать два компонента и надеюсь, что каждый ведет себя независимо друг от друга.Таким образом, в идеале, если я нажимаю на каждую кнопку, каждая из них должна выводить «foo», но на самом деле не потому, что значения идентификаторов дублируются. 

<!DOCTYPE html>

<head>
    <title></title>
</head>

<body>
    <div id="app">
        <my-comp></my-comp>
        <my-comp></my-comp>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://unpkg.com/vue"></script>
    <script>
        Vue.component('my-comp', {
            template: `
                <div>
                    <button id="btn" @click="onClick">Click me</button>
                    <div id="pid"></div>
                </div>
            `,
            methods: {
                onClick(e) {
                    $('#pid').text("foo");
                }
            },
        });

        const vm = new Vue({
            el: '#app',
            data: () => ({}),
            methods: {}
        });
    </script>
</body>

</html>

Ответы [ 2 ]

2 голосов
/ 14 июня 2019

Не используйте id в компонентах vue, если вы не передаете уникальное значение для него с помощью реквизита. Вам очень редко когда-либо действительно понадобится получить ссылку на элемент в vue, и если вы обнаружите, что вам это нужно, вам следует использовать refs .

В вашем случае вы можете просто использовать привязку свойства и шаблона, чтобы обрабатывать вещи для вас: 

Vue.component('my-comp', {
    template: `
                <div>
                    <button @click="onClick">Click me</button>
                    <div>{{ text }}</div>
                </div>
            `,
    data() {
        text: ''
    },
    methods: {
        onClick(e) {
            this.text = 'foo'
        },
    },
})
1 голос
/ 14 июня 2019

Похоже, вам нужен пакет vue-uniq-ids .

Тенденция к использованию компонентов. Компоненты классные, они маленькие, очевидный, простой в использовании и модульный. Пока не доходит до свойства id.

Некоторые атрибуты HTML-тега требуют использования свойства id, например label [for], input [form] и многие атрибуты aria- *. И проблема с идентификатором является то, что он не является модульным. Если несколько свойств id на страница будет иметь одинаковое значение, они могут влиять друг на друга.

VueUniqIds поможет вам избавиться от этой проблемы. Обеспечивает набор связанных с id директив, значение которых автоматически изменяется добавление уникальной строки при сохранении удобства чтения атрибута.

...