jQuery UI Widgets Forums Vue read parent data from child

This topic contains 4 replies, has 2 voices, and was last updated by  jqwidgetsdev 2 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • read parent data from child #130937

    jqwidgetsdev
    Participant

    Hi,

    My app.vue contains a tab component with 1 tab. The contents for the tab comes from child1.vue component.
    Additionally I have a global footer called footer.vue.
    The footer has a button/event to read the tab contents (child1.vue).

    How to read the data of parent component from the child footer.vue?
    How to read data between child components?

    app.vue

    <template>
      <div>
        <JqxTabs ref="myTabs" :width="300" :height="200" :position="'top'">
          <ul><li>Name</li></ul>
          <child1 />
        </JqxTabs>
        <myFooter />
      </div>
    </template>
    <script>
    import JqxTabs from "jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue";
    import myFooter from "./footer";
    import child1 from "./child1";
    
    export default {
      components: {
        JqxTabs,
        myFooter,
        child1 },
      data: function () {
        return {};
      },
    };
    </script>
    

    footer.vue

    <template>
    <div id="footer" style="overflow: auto">
          <JqxButton
            ref="btnApply"
            :width="120"
            :height="26"
            v-on:click="btnApplyClicked()">Apply all
          </JqxButton>
    </div>
    </template>
    
    <script>
    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
    
    export default {
      components: {
        JqxButton
      },
      data() {
        return {}
      }
      ,methods:{
        btnApplyClicked(){
          alert("btnApplyClicked");
    // how to 
          const index = this.$parent.$refs.myTabs.selectedItem;
          alert("btnApplyClicked " + index);
          // get the myForm1
          if (parseInt(index) === 1) {
            const myForm = this.$child1.$refs.myForm1;
          }
        }
      }
    }
    
    </script>
    

    child1.vue

    <template>
      <div style="overflow: auto">
          <JqxForm
            ref="myForm1"
            style="width: '100%'; height: '100%'"
            :template="template"
            :value="value"
          >
          </JqxForm>
      </div>
    </template>
    
    <script>
    import JqxForm from "jqwidgets-scripts/jqwidgets-vue/vue_jqxform.vue";
    
    export default {
      components: {
        JqxForm
      },
      data() {
        return {
          template: [
            {
              bind: "name",
              type: "text",
              label: "name",
            },
          ],
          value: {
            name: "tommy",
          },
        };
      },
    };
    </script>
    

    Thanks in advance.

    read parent data from child #130942

    Hi,

    You can pass callback functions that will be invoked on a given event.
    I have provided you with an example in which a formName is saved in the App component.
    In the Child1 there is your form and when the name changes the formName variable will be also changed,
    this way when you click the button in the Footer it will receive the formName

    https://codesandbox.io/embed/laughing-tesla-03xige?fontsize=14&hidenavigation=1&theme=dark

    I hope this helps!

    Best regards,
    Svetoslav Borislavov

    jQWidgets Team
    https://www.jqwidgets.com/

    read parent data from child #130952

    jqwidgetsdev
    Participant

    Hi Svetoslav,

    Sorry, I am not getting your example. Able to simplify it?

    Thanks.

    read parent data from child #130955

    Hi,

    Sorry for the incorrect link, here is the correct one: https://codesandbox.io/embed/romantic-williams-zjdwn2?fontsize=14&hidenavigation=1&theme=dark
    In your case, you have a Child1 component, Footer and the App.
    You want the Footer to be connected with Child1.
    To achieve this your App should save the form’s information as a state.
    When the form value in Child1 changes, a callback provided as a property of Child1 is invoked to change the state in the App component,
    this way the form value is being transferred to the App Component.
    Since we have the value of the form in the App component we can pass that value to the footer or pass a callback that will be invoked when we click the button in the Footer.

    Please see the provided demo to get familiar

    Best regards,
    Svetoslav Borislavov

    jQWidgets Team
    https://www.jqwidgets.com/

    read parent data from child #130962

    jqwidgetsdev
    Participant

    Thanks Svetoslav, yes it makes sense now.

    Best regards.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.