0

How to modify the default logic of the createGetter function in Vue3? If the property value in props or data is a variable with double curly braces “{{}}”, it is considered a variable that needs further processing. You need to add custom logic to turn these variables into specific replacement values.

Note that there are many Vue files in the project, so it is too cumbersome to modify them one by one. Therefore, I want to directly modify the createGetter function of Vue3, which will require the least amount of code modification.

Here’s an example of what you’re trying to do:

<template>
  <div>
    <div>{{widgetName}}</div>
    <div>{{productName}}</div>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    widgetName: {
      type: String,
      default: '{{table.name}}',
    }
  },
  data () {
    return {
      productName: '{{product.name}}',
      product: {
        name: 'phone'
      },
      table: {
        name: 'good'
      },
    };
  },
  created () {
    console.log(this.widgetName) // show 'good'
    console.log(this.productName) // show 'phone'
  },

};
</script>
linjuming
  • 2,117
  • 4
  • 23
  • 32
  • `many Vue files in the project` and the code you've shown is an example of one of them? – Jaromanda X Jul 11 '23 at 01:04
  • Yes, this is just a sample code to illustrate my intention. In fact, there are many such codes in the project that need to perform such truth value conversion processing. – linjuming Jul 11 '23 at 01:10
  • What you're describing is simply updating values from some initial value based on some event or interaction... This is very simple with Vue, but it depends on what the event or interaction it is that should trigger the update, and what values should be used to update with. You can do this with lifecycle hooks and/or methods and/or event listeners. It's a very wide open, vague question. Your initial thought to somehow modify the core functionality of Vue (which can be done, it is open source after all) seems like an extreme and unnecessary solution. – yoduh Jul 11 '23 at 01:16
  • so, this isn't actual code, it's an illustration of code you want to write ... so, you'll need to re-write actual code anyway - or is there no code yet, and you want to write it your own way rather than how vue *actually works*? – Jaromanda X Jul 11 '23 at 01:28
  • Yes, I haven’t used overflow stack for a long time. Maybe it’s because I didn’t insert the code correctly. – linjuming Jul 11 '23 at 01:35

0 Answers0