получать стиль и динамически применять его к элементам, выбранным с помощью класса, используя Vue - PullRequest
Новая
       10

получать стиль и динамически применять его к элементам, выбранным с помощью класса, используя Vue

0 голосов
/ 27 июня 2018

Я делаю веб-сервис с Vue.js. То, что я пытаюсь сделать, это изменить стили элементов, которые получают из свойства родительского компонента. Например:

(пропущены строки)

Родительский компонент 

<template>
<div>
    <child v-bind:styles="styles"></child>
<div>
</template>
<script>
export default {
    components: { child },
    data() {
        return {
            styles: { width:'100px', height:'70px' }
        };
    }
}
</script>

Объект width и height из styles может быть изменен, т.е. любой, кто использует родительский компонент, может решить.

Компонент Chlid 

<template>
<div>
    <div class="iterDiv" v-for="(item, index) in arr" v-key="index">{{ item }}</div>
</div>
</template>
<script>
export default {
    name: 'Child',
    props: [ 'styles' ],
    data() {
        return {
            arr: [1, 2, 3, 4, 5]
        };
    }
}
</script>

И дочерний компонент состоит из повторяющихся элементов, которые имеют класс iterDiv для выбора, например document.getElementsByClassName('iterDiv').

Теперь я хочу изменить элементы div дочернего компонента, имеющие iterDiv имя класса, стиль с styles динамически.

Есть ли способ для этого? Спасибо.

Если ответ уже есть, я пропустил его и дал мне знать. Я удалю этот вопрос.

...