AT-UI Components Causing Issues

[creativemind1]

This is one example <at-input v-model="inputValue" placeholder="Please input"></at-input> On initial load, it is working fine but when we are visiting any dead URL and going back from the page, all issues are popping up (due to AT-UI components).

We tried to use few components and it is throwing error in the console

1. Error while initializing app RangeError: Maximum call stack size exceeded
2. Property or method "inputValue" 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 3.TypeError: Cannot read property '$options' of undefined

[diego-lipinski-de-castro]

Could you paste some code here or codepen (or any other)? It does not seems it is related to AT-ui directly but instead it is missing properties which you're trying to reference on your template/methods (typo?)

[creativemind1]

<template>
<div class="app">
<at-input v-model="inputValue" placeholder="Please input"></at-input>
<at-checkbox v-model="checkboxValue1" label="Shenzhen">Enable</at-checkbox>    
<at-select v-model="model7" multiple size="large">
              <at-option value="1">Shenzhen</at-option>
              <at-option value="2">Guangzhou</at-option>
              <at-option value="3">Shanghai</at-option>
              <at-option value="4">Beijing</at-option>
              <at-option value="5">chengdu</at-option>
            </at-select>  
</div>     
</template>
<script>
  export default {    
    data: function () {
      return {
      }
    }
  }
</script> 

The above is my current code. I used the direct code from the AT-UI and paste into my page. Also if I select any thing from my select option, it is redirecting to the dead page having error _this7.model.push is not a function

[diego-lipinski-de-castro]

That's what I though, v-model means you're binding the value of that input or component to a vue data property, which in your case is empty, so Vue doesn't know what you're referencing to.

Try

<script>
  export default {    
    data: function () {
      return {
          inputValue: '',
          checkboxValue1: true,
          model7: 2 // from at-ui docs, this could by an String or number or an Array
      }
    }
  }
</script> 

Further consider Vue docs: https://vuejs.org/v2/guide/#Declarative-Rendering

[creativemind1]

I worked on your given code but now my template is showing error page of values.indexOf is not a function

[diego-lipinski-de-castro]

I'm not sure how at-ui handle at-select but try

<script>
  export default {    
    data: function () {
      return {
          inputValue: '',
          checkboxValue1: true,
          model7: [1,3] // because you're passing the props multiple, it will problaly look for an array, thats why it is asking for indexOf, a type number does not have indexOf method. If still does not work, try passing the array items as String, but i guess this is fine.
      }
    }
  }
</script>