Question

我正在尝试根据插件中的Vue doc

定义动态文字指令

myPlugin.js

    const defaultNoiseColor = 'white'

    ...

    const MyPlugin = {
      install (Vue, options) {
        console.log('installing MyPlugin')
        Vue.directive('noise', {
          isDynamicLiteral: true,
          bind (el, binding, vnode) {
            const noisecolor = binding.expression || defaultNoiseColor
            console.log('NOISE BIND: ', noisecolor)
          },
          update (el, binding, vnode) {
            const noisecolor = binding.expression || defaultNoiseColor
            console.log('NOISE UPDATE', noisecolor)
          },
          unbind (el, binding, vnode) {
            console.log('NOISE UNBIND: ')
          }
        })
        ...
      }
    }

    export default MyPlugin

在我的main.js中，我添加了

main.js

...
Vue.use(MyPlugin)
...

我的App.vue

中有自定义指令（带胡须）

App.vue

    <template>
      <div id="app" class="container"  v-noise="'{{ noisecolor }}'">
        ...
      </div>
    </template>

    <script>
    ...
    window.data = {
      kittens: true,
      noisecolor: 'brown'
    }

    export default {
      ...
      data () {
        return window.data
      }
    }
    </script>

所以noisecolor应该是'brown'，但是在测试myPlugin时，我在绑定期间得到了默认的白色......（应该根据文档更新期间？）

myPlugin.spec.js

import Vue from 'vue'
import App from '@/App'
import MyPlugin from '@/plugins/MyPlugin'

import { mount } from 'avoriaz'

Vue.use(MyPlugin)
...

describe('MyPlugin', () => {
  let wrapper

  beforeEach(() => {
    wrapper = mount(App, { attachToDocument: true, propsData: { noisecolor: 'brown' } })
  })

  it('should run', () => {
    Vue.noise.start()
    ...
    expect(true).to.equal(true)
  })
})

Answer 1

发现了问题：应该使用binding.value而不是binding.expression

已解决添加

nvidia-docker run --rm -u ‘id -u‘:‘id -g‘ -p 12345:12345 -p 9090:9090 -v ‘pwd‘/data:/data -v ‘pwd‘/log:/log -v ‘pwd‘/license:/license opsh2oai/h2oai-runtime

导致以下控制台输出：

    console.log('NOISE BINDING: ', binding)
    const noisecolor = binding.value || defaultNoiseColor

插件中的Vue.js Dynamic Litera Directivel无法正确绑定

1 个答案: