将样式应用于由v-动态添加的HTML元素以使用Vuejs

问题描述

我正在使用v-for将元素动态添加到列表中.

I'm adding elements to a list dynamically using v-for.

<ol>
    <li v-for="light in lights">
        <input type="range" min="0" max="255" v-model="light.currentBrightness" v-on:change="setBrightness(light)" />
    </li>
</ol>

我想使用 rangeslider 装饰滑块.

问题是，在初始化DOM之后添加新元素时，它没有采用rangelider.js中指定的样式.解决此问题的方法是在rangelider.js中调用reinitialize方法，该方法将重新装饰所有滑块元素.

Problem is, when a new element is added after the DOM is initialized, it's not taking the style specified in rangeslider.js. Way to fix this is to call the reinitialize method in rangeslider.js which will redecorate all the slider elements.

我不确定在运行时动态添加元素时如何调用javascript方法.有人怎么做吗?对我来说，这似乎是一个非常普遍的问题，但我无法通过Google搜索找到解决方案.

I'm not sure how to call the javascript method when the element is added dynamically during the runtime. Does anyone how to do it? To me, it seems like a very common problem but I could not find a solution by Googling.

我的问题与 github 中讨论的问题相同.

My issue is same as discussed in github.

推荐答案

如果您是JavaScript和Vue的新手，那么您将在很接近的深渊中潜水. Rangeslider不仅是样式(如CSS)，它是一个小部件，可替代内置的范围输入.

If you're new to JavaScript and Vue, you're diving in pretty close to the deep end. The rangeslider isn't just styling (like CSS), it's a widget that replaces the built-in range input.

Vue背后的一个基本想法是，它可以控制DOM，而您只需要修改模型，但是有一些经过精心控制的异常.组件具有生命周期挂钩，您可以在其中插入和修改组件所拥有的DOM元素.

One basic idea behind Vue is that it controls the DOM and you only modify your model, but there are some carefully controlled exceptions. Components have lifecycle hooks where you are allowed to insert and modify DOM elements owned by the component.

有关v模型支持的一些说明:

• 接受价值支持
• 发出具有新值的输入事件

因此，我们制作了一个其模板为范围输入元素的组件.我们给它一个value道具.在mounted钩子中，我们在输入元素(可作为el使用)上初始化Rangeslider，然后将其设置为在更改时发出input事件.

So we make a component whose template is a range input element. We give it a value prop. In the mounted hook, we initialize the rangeslider on the input element (made available as el), then set it up to emit input events on change.

new Vue({
  el: '#app',
  data: {
    lights: [{
        currentBrightness: 10
      },
      {
        currentBrightness: 30
      }
    ]
  },
  methods: {
    addRange: function() {
      this.lights.push({
        currentBrightness: 50
      });
    }
  },
  components: {
    rangeSlider: {
      props: ['value', 'min', 'max'],
      template: '<input min="{{min}}" max="{{max}}" type=range />',
      mounted: function() {
        var vm = this
        $(this.$el)
          .val(this.value)
          // init rangeslider
          .rangeslider({
            polyfill: false
          })
          // emit event on change.
          .on('change', function() {
            vm.$emit('input', this.value)
          })
      }
    }
  }
});

<link href="//cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.0/rangeslider.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.0/rangeslider.min.js"></script>
<div id="app">
  <ol>
    <li v-for="light in lights">
      <range-slider v-model="light.currentBrightness" min="0" max="255"></range-slider>
      <div>{{light.currentBrightness}}</div>
    </li>
  </ol>
  <button @click="addRange">Add Range</button>
</div>

这篇关于将样式应用于由v-动态添加的HTML元素以使用Vuejs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！