New post
Question
· Jan 26, 2019

Binding of data property from Vue instance to Vue component using vuejs

#CSP #JavaScript #Vue.js #Caché

Hi,

I have been trying to implement SPA using routing between two components in a CSP page. 

If i use the line which i commented the page views and gets data from the vue instance (when not using the <route-view> and other 2 vue route functions below).

since i need to implement routing i am using as below, now the property "selectedYear" is not getting data from vue instane and i am getting the below error as well.

I dont know whether i am going down the right path.

please see my code below and help me

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Sample Report</title>
    <link rel="stylesheet" href="bootstrap.min.css">
  </head>
  <body>

    <div class="container-fluid" id="app" v-cloak>
      <div class="row">
        <div class="header">
          <h3><b>Sample Report</b></h3>
        </div>
      </div>
      <div class="form-group">

        <!--- COMMNETED CODE--->

        <!--option-page v-bind:years="years" v-bind:year-selected="selectedYear"

          v-on:onyearchange="selectedYear = $event"></option-page>

      <!----------------------------------------------------------------------------->

          <router-view></router-view>
      </div>
    </div>

  </body>
  <script type="text/x-template" id="option-template">
    <div class="form-group">
        <div class="form-group" align="center">
          <label for="select-Year">Select CMS Fiscal Year :</label>
          <select class="form-control input-sm" style="width:120px" id="select-Year" 
              v-model="selectedYear" v-on:change="$emit('onyearchange',selectedYear)"  >
            <option v-for="yr in years" v-bind:value="yr" >{{ yr }}</option>
          </select>
        </div>
      </div>
  </script>
  <script type="text/x-template" id="test-template">
    <div class="form-group">
        <div class="form-group" align="center">
        <h1> hello all </h1>
        </div>
    </div>
  </script>
  
  <script src="json3.min.js"></script>
  <script type="text/javascript" src="vue.js" ></script>
  <script  type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="vue-router.js"></script>
  
   <script language="javascript">
      Vue.component('test', {
        template: '#test-template'
      });

      Vue.component('optionPage', {
        template: '#option-template',
        props: {
          years: Array,
          yearSelected: Number
        },
        data: function() {
          return {
            selectedYear: this.yearSelected
          }
        },
        methods: {
          loadData:function() {
            vm.initReport();
          }
        }
      });
    
    const test = {
        props: {
          years: Array,
          yearSelected: Number
        },
        template: '#option-template'
      };

      Vue.use(VueRouter);

      const router = new VueRouter({
        routes: [
          {
            path: '/',
            component: test,
            props: true
          }
        ]
      });

    router.push('/');
    
    var vm = new Vue({
        el: '#app',
        router,
        data: {
          years: [2018,2019,2020],
          selectedYear: '',
        }
      });
  </script>

</html>

ERROR/WARNING IN CONSOLE:

[Vue warn]: Property or method "selectedYear" 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. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

Thanks,

Discussion (1)0
Log in or sign up to continue