Issue with Dynamic Arguments

Hi All,

I tried the examples in https://vuejs.org/v2/guide/syntax.html#Dynamic-Arguments but I was not successful as I always get the below warnings in the console.

[Vue warn]: Property or method “attribname” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

My HTML:

<!-- Dynamic Arguments-->
<h4 class="comment">Dynamic Arguments</h4>
<a v-bind:[attribName]="urlNamecheap">Visit Namecheap.com</a>
<button v-on:[eventName]="doSomething">Click me</button>

My Script:

<script>
      var vm = new Vue({
        el: '#app',
        data: {
          msg: 'Hello Vue!',
          rawHtml: '<span style="color:  red">This should be red.</span>',
          dynamicId: 'mainDiv',
          isButtonDisabled: true,
          number: 1000,
          ok: true,
          message: 'I love my Razan',
          id: 'Rzn248',
          seen: true,
          url: 'https://www.google.com',
          urlNamecheap: 'https://www.namecheap.com',
          attribName: 'href',
          eventName: 'click'

        },
        methods: {
          doSomething: function() {
            console.log('I just got fired up, who was it?');
          }
        }
      });
    </script>

Am I doing something wrong or is there indeed an issue?

[LinusBorg]

Hm, this might indeed be an iusse in a specific use case that you came across, as it seems.

Let me explain:

The immediate reason that you are seeing an error is that you are defining your template directly in an HTML page, so the browser interprets the HTML before Vue does. And the browser turns all attributes to lowercase HTML is case-insensitive.

So to Vue, your template looks like this:

<a v-bind:[attribname]="urlNamecheap">Visit Namecheap.com</a>

…while your property in the component is called attribName

Usually, in other cases such as props, Vue can deal with that by converting kebap-case attributes into camelCase properties:

<a v-bind:prop-name="urlNamecheap">Visit Namecheap.com</a>

Vue.component({
  props: ['propName'] // Vue realizes hat in the template, we call it `prop-name`
})

This is documented in our docs somewhere, but I can’t point you to it from the top of my head.

This doesn’t seem to happen for dynamic attributes though 😕

We should probably transfer this issue to the core repository.

/cc @chrisvfritz ?

[BinMakki]

Hi @sdras , Yes it does shed light, and I also agree with you that it should be brought forward in a clearer manner.