Django 模板中的实时表单字段计算

Question

我正在创建一个股票市场网站，并希望在用户键入时实时显示总购买价值，而不是在表单清理期间显示错误。该计算涉及将两个字段相乘。第一个是数量字段，它只是用户输入的数字。第二个是股票，它是外键的下拉列表。用户选择一只股票，该股票的一个属性是价格。我想将这些字段相乘并在用户每次更改字段时显示结果。如果可能的话，我也想用模型表格来做到这一点。我尝试在模板中使用 {{ form.field.value }} 来获取一个字段，但我无法让它更新以进行更改。对于股票字段，我认为最好的选择是在 JavaScript 中创建一个匹配的数组，一旦我可以获得实时更新的表单值，就可以将其与数组中的股票价格相匹配。

这是一个不是我制作的示例，它接近我想做的基于表单输入的实时 Javascript 计算

任何帮助深表感谢！

Models.py

class Stock(models.Model):

    name = models.CharField(max_length=30, primary_key=True, blank=True)

    @property

    def price():

         do some calculations

class Transaction(models.Model):

    transaction_types = (

        ('buy', 'Buy'),

        ('sell', 'Sell'),

    )

    user = models.ForeignKey(User, on_delete=models.CASCADE)

    stock = models.ForeignKey(Stock, on_delete=models.CASCADE)

    transaction_type = models.CharField(max_length=4, choices=transaction_types)

    quantity = models.BigIntegerField()

    purchase_price = models.DecimalField(decimal_places=2, max_digits=30)

    time = models.DateTimeField()

Forms.py

class TransactionForm(forms.ModelForm):

class Meta:

    model = Transaction

    fields = ['transaction_type', 'stock', 'quantity']

    widgets = {

        'quantity': forms.NumberInput(attrs={'id': 'quant', 'name': 'quant'})

    }

Answer 1

我想出了如何做到这一点。基本上，我使用 Django Rest Framework 制作了一个 api。从那里，我使用 Vue 将我的表单制作为 v 模型。每次 v-model 发生变化时，我都会使用 watch 来调用 api。