如何在Vue.js中访问AngularJS项目Twig文件中的变量？

Hey there! Let's break this down step by step since you're transitioning from AngularJS to Vue while working with Twig templates—this is a common scenario, so let's tackle your questions one by one.

1. Resolve Twig & Vue Template Syntax Conflict #

First, since both Twig and Vue use {{ }} for variable interpolation, your existing {% verbatim %} tags are already the right approach to tell Twig to ignore those Vue variables. You can keep that part as-is, but let's swap out the Angular-specific ng-href for Vue's equivalent:

<section id="ProjectController">
  <div class="list-default list-lg">
    <a class="animated fade-in-right" v-for="project in projects" :href="project.url">
      <project 
        @delete="onDelete"
        :show-delete-action="true"
        :allow-delete="project.ownerId === user.id"
        :show-progress="true"
        :show-status="true"
        :project="project"
      ></project>
    </a>
  </div>
</section>

(Note: :href is Vue's shorthand for v-bind:href, which handles dynamic URL binding just like ng-href did.)

2. Accessing Project Variables in Vue #

This is straightforward once your Vue instance is set up correctly. In your v-for="project in projects" loop, project represents each item in your projects array. To access properties like id, ownerId, or name, you just use {{ project.id }}, {{ project.ownerId }}, etc.—almost exactly like you did in AngularJS, just with Vue's syntax.

3. Fix Your Vue Instance Code #

Your current Vue code has a couple of small tweaks needed (mostly deprecated syntax and missing data):

var ProjectController = new Vue({
  el: '#ProjectController', // Convention to place el first
  data: {
    projects: [], // Initialize as empty array for smoother reactivity (instead of null)
    user: {} // Add user object here—your template references user.id, so it needs to live in Vue's data
  },
  methods: {
    getProjects: function() {
      // Replace this with an actual API call if needed; this is just mock data
      this.projects = JSON.parse('[{"id": 1, "name": "My First Project", "ownerId": 42, "url": "/projects/1"}, {"id": 2, "name": "Second Project", "ownerId": 99, "url": "/projects/2"}]');
      // Populate user data (match ownerId of one project to test the allow-delete logic)
      this.user = { id: 42 };
    },
    onDelete: function(project) {
      // Handle delete logic here—e.g., remove the project from the array
      this.projects = this.projects.filter(p => p.id !== project.id);
    }
  },
  mounted: function() {
    this.getProjects(); // mounted is Vue 2+'s replacement for the deprecated ready hook
  }
})

Key fixes:

• Swapped ready for mounted (Vue 2+ no longer uses ready)
• Initialized projects as an empty array instead of null to avoid reactivity issues
• Added a user object to your data (since your template checks user.id against project.ownerId)
• Added an onDelete method to handle the delete event from the <project> component

4. Update the Component for Vue #

Your original AngularJS component attributes need to be converted to Vue props and event bindings. Here's a quick example of how the <project> component would look in Vue:

Vue.component('project', {
  props: {
    project: {
      type: Object,
      required: true
    },
    showDeleteAction: {
      type: Boolean,
      default: false
    },
    allowDelete: {
      type: Boolean,
      default: false
    },
    showProgress: {
      type: Boolean,
      default: false
    },
    showStatus: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    triggerDelete() {
      this.$emit('delete', this.project); // Emit the delete event up to the parent controller
    }
  }
})

In this component, we define all the props we're passing from the parent, and add a method to emit the delete event when the user triggers the delete action.

Quick Recap #

• Keep using {% verbatim %} in Twig to protect Vue's {{ }} syntax (or configure Vue to use different delimiters if you prefer, but verbatim is simpler here)
• In v-for loops, access item properties directly with {{ project.propertyName }}
• Replace Angular directives like ng-href with Vue's :href
• Convert component attributes to Vue props (: prefix) and events (@ prefix)

内容的提问来源于stack exchange，提问作者christopher-haugaard