Vue.js组件方法中获取Twig模板传递的token变量

Got it, let's work through how to get that token variable your Twig template receives into your Vue component's methods. Since you can already grab it in plain script tags, we just need to bridge that gap to Vue. Here are a few reliable approaches:

1. Attach the Token to the Global window Object #

This is the quickest fix, especially for smaller projects. In your Twig template, right after the token is rendered, store it in a global window property before initializing your Vue app:

<!-- In registration.html.twig -->
<script>
  // Store the token globally
  window.authToken = {{ token }};
</script>

<!-- Then load your Vue scripts/initialize your app -->
<script src="path/to/your/vue/app.js"></script>

Now in any Vue component's methods, you can access it directly:

// Inside your Vue component
export default {
  methods: {
    submitRegistration() {
      const token = window.authToken;
      // Use the token for API calls or other logic
      console.log('Using token:', token);
    }
  }
}

2. Pass the Token as a Prop to Your Root Vue Instance #

This follows Vue's component best practices, keeping things more encapsulated. First, add the token as a data attribute to your root Vue element in Twig:

<!-- In registration.html.twig -->
<div id="app" :initial-token="{{ token }}"></div>

Then initialize your root Vue instance with a prop, and pass it down to child components if needed:

// Root Vue instance
new Vue({
  el: '#app',
  props: ['initialToken'],
  data() {
    return {
      authToken: this.initialToken
    };
  },
  methods: {
    someAction() {
      // Access the token directly from component state
      console.log(this.authToken);
    }
  }
});

For child components, just define a token prop and pass it from the parent:

<!-- Parent component template -->
<child-component :token="authToken"></child-component>

<!-- Child component script -->
export default {
  props: ['token'],
  methods: {
    useToken() {
      console.log(this.token);
    }
  }
}

3. Inject the Token via a Hidden DOM Element (Hackier, But Works) #

If you need a workaround for some edge case, you can render the token in a hidden element and grab it when the component mounts:

<!-- In your Twig template or Vue component's template -->
<div id="token-holder" style="display: none;" data-token="{{ token }}"></div>

Then in your component's mounted hook, fetch it from the DOM:

export default {
  data() {
    return {
      authToken: ''
    };
  },
  mounted() {
    const tokenElement = document.getElementById('token-holder');
    this.authToken = tokenElement.dataset.token;
  },
  methods: {
    processToken() {
      console.log(this.authToken);
    }
  }
}

Recommendation #

Stick with either the global window approach (quick and simple) or the prop method (cleaner for component-based apps). The hidden element trick should be a last resort since it ties your component to the DOM structure.

内容的提问来源于stack exchange，提问作者ItsMyLife