Retrieving the content of a component tag in Vue

Question

Retrieving the content of a component tag in Vue

Recently, I've been experimenting with Vue and I'm interested in achieving the following:

<snippet name="Select From Table">
  SELECT *
  FROM database.table
</snippet>

I want to create a link that, when clicked, triggers a function allowing access to the SQL query.

I attempted using a component, but struggled to figure out how to retrieve the SQL within the click event. Although slots seem promising, it appears they only function within the tag itself and not as attributes.

Any suggestions or pointers would be greatly appreciated! Thanks!

javascript vue.js vue-component

Answer 1

Answer №1

If you're looking to extract the content of a slot, you can achieve this by iterating through this.$slots.slotName and accessing the innerText or innerHtml as needed.

Just a heads up: allowing client-side execution of SQL commands, as mentioned by @Terry, poses a significant security risk.

Check out the demo below:

Vue.component('v-test',{
    template:`
        <div>
          <a @click.stop="addText()">{{current}}</a>
        </div>
    `,
    data () {
      return {
        current: 'Bla'
      }
    },
    methods: {
      addText: function () {
        this.current += 'Bla'
      }
    }
})
Vue.component('snippet',{
    template:`
        <div style="border: 1px solid grey" @click="getHtml()">
            <slot></slot>
        </div>
    `,
    methods: {
      getHtml: function () {
        alert(this.$slots.default && Object.values(this.$slots.default).map((item, index) => {
          return item.elm && (item.elm.wholeText || item.elm.innerText)
        }).join('\r\n'))
      }
    }
})

new Vue ({
  el:'#app'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
    <div class="container">
        <snippet>Test SQL ...</snippet>
        <br>
        <snippet><strong>Te<i>s<span>.</span></i>t</strong> SQL ...</snippet>
        <br>
        <snippet><strong>Test<v-test></v-test></strong> SQL ...</snippet>
    </div>
</div>

Another approach is to utilize the ref property.

Vue.component('v-test',{
    template:`
        <div>
          <a @click.stop="addText()">{{current}}</a>
        </div>
    `,
    data () {
      return {
        current: 'Bla'
      }
    },
    methods: {
      addText: function () {
        this.current += 'Bla'
      }
    }
})
Vue.component('snippet',{
    template:`
        <div style="border: 1px solid grey" @click="getHtml()" ref="test">
            <slot></slot>
        </div>
    `,
    methods: {
      getHtml: function () {
        alert(this.$refs.test.innerText)
      }
    }
})

new Vue ({
  el:'#app'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
    <div class="container">
        <snippet>Test SQL ...</snippet>
        <br>
        <snippet><strong>Te<i>s<span>.</span></i>t</strong> SQL ...</snippet>
        <br>
        <snippet><strong>Test<v-test></v-test></strong> SQL ...</snippet>
    </div>
</div>

Answer 2

If you're looking to extract the content of a slot, you can achieve this by iterating through this.$slots.slotName and accessing the innerText or innerHtml as needed.

Just a heads up: allowing client-side execution of SQL commands, as mentioned by @Terry, poses a significant security risk.

Check out the demo below:

Vue.component('v-test',{
    template:`
        <div>
          <a @click.stop="addText()">{{current}}</a>
        </div>
    `,
    data () {
      return {
        current: 'Bla'
      }
    },
    methods: {
      addText: function () {
        this.current += 'Bla'
      }
    }
})
Vue.component('snippet',{
    template:`
        <div style="border: 1px solid grey" @click="getHtml()">
            <slot></slot>
        </div>
    `,
    methods: {
      getHtml: function () {
        alert(this.$slots.default && Object.values(this.$slots.default).map((item, index) => {
          return item.elm && (item.elm.wholeText || item.elm.innerText)
        }).join('\r\n'))
      }
    }
})

new Vue ({
  el:'#app'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
    <div class="container">
        <snippet>Test SQL ...</snippet>
        <br>
        <snippet><strong>Te<i>s<span>.</span></i>t</strong> SQL ...</snippet>
        <br>
        <snippet><strong>Test<v-test></v-test></strong> SQL ...</snippet>
    </div>
</div>

Another approach is to utilize the ref property.

Vue.component('v-test',{
    template:`
        <div>
          <a @click.stop="addText()">{{current}}</a>
        </div>
    `,
    data () {
      return {
        current: 'Bla'
      }
    },
    methods: {
      addText: function () {
        this.current += 'Bla'
      }
    }
})
Vue.component('snippet',{
    template:`
        <div style="border: 1px solid grey" @click="getHtml()" ref="test">
            <slot></slot>
        </div>
    `,
    methods: {
      getHtml: function () {
        alert(this.$refs.test.innerText)
      }
    }
})

new Vue ({
  el:'#app'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
    <div class="container">
        <snippet>Test SQL ...</snippet>
        <br>
        <snippet><strong>Te<i>s<span>.</span></i>t</strong> SQL ...</snippet>
        <br>
        <snippet><strong>Test<v-test></v-test></strong> SQL ...</snippet>
    </div>
</div>

Retrieving the content of a component tag in Vue

Answer №1

Similar questions

Enforce file selection using AngularJS based on certain conditions

Slide your finger upwards to shut down the mobile navbar in bootstrap

Using Jquery to preserve the selected value in a radio button

What steps do I need to take to extract the date and month from a single datepicker using the code below?

Using AJAX in a Django application within a RESTful ecosystem

``How does React facilitate the passing of properties from an API to a component?

The functionality of Intersection Observer causes text to appear over the header

Performing an Axios post request with multiple parameters within a Vuex action

Disabling the "Master Detail" feature in MUI

"Encountering a Dojo error where the store is either null or not recognized

Ways to determine if a script is currently running within Node.js环境

Guide to authenticating users using Vue JS and Django

Fade-in with jQuery Javascript when clicked and fade-out once loading is complete

Guide to attaching a click event in a subview of Backbone

Unable to retrieve the API key in Nuxt framework

Creating an associative array with this structure

Top location for Cordova/Phonegap events in AngularJS

Tips for manipulating specific URL redirection to an alternative URL within a NuxtJs application

Be patient for the complete loading of the image during an AJAX operation

"Tempus Dominus now offering a seamless experience without the need for an